<template>
  <div class="terminal-detail" ref="terminalDetail">
    <div class="bigMask" v-if="lock">
      <img src="@/assets/terminalDetail/lock_red.png"class="lockRed" alt="">
    </div>
    <div class="terminal-detail-header">
      <div class="terminal-detail-header_time">
        {{ currentDate }}
      </div>
      <div class="terminal-detail-header_name" ref="terminalHeader">
        <!-- {{clientName}} -->
        <select class="clientSelector" @change="clientSelect" v-model="clientSelected">
          <option v-for="item in clientList" :value="item.id" >{{item.name}}</option>
        </select>
      </div>
      <div class="terminal-detail-header_back" @click="back">
        <img src="@/assets/terminalDetail/back.png" />
        <a style="margin-left: .1rem;color: #fff;">返回</a>
      </div>
    </div>
    <div class="remoteKeyboard" v-show="isShowKeyboard">
      <div class="simple-keyboard">
        <div class="combination-keyboard">
          <span v-for="(item, index) in combinationKey"
            :class="['combination-keyboard-button',
            `${activeCombinationKey.includes(item.key) ? 'combination-keyboard-button-active ': ''}`]"
            @click="combinationKeyEvent(item)">
            {{item.key}}
          </span>
          <span class="combination-keyboard-button combination-keyboard-button-close" @click="showKeyboard">
            关闭键盘
          </span>
        </div>
      </div>
    </div>

    <div class="cotroll-button-pannel-parent" v-show="isFullscreen">
      <div class="cotroll-button-pannel" >
        <div class="cotroll-button-pannel-btn" @click="showMousePannel">
          <div class="cotroll-button-pannel-btn-exit">
            <img src="@/assets/terminalDetail/mouse.png" v-show="!isShowMousePannel"/>
            <img src="@/assets/terminalDetail/mouse_active.png" v-show="isShowMousePannel"/>
          </div>
          <div :class="['cotroll-button-pannel-btn-text', isShowMousePannel ? 'active' : '']">鼠标</div>
        </div>
        <div class="cotroll-button-pannel-btn" @click="showKeyboard">
          <div class="cotroll-button-pannel-btn-exit">
            <img src="@/assets/terminalDetail/keyboard.png" v-show="!isShowKeyboard"/>
            <img src="@/assets/terminalDetail/keyboard_active.png" v-show="isShowKeyboard"/>
          </div>
          <div :class="['cotroll-button-pannel-btn-text', isShowKeyboard ? 'active' : '']">键盘</div>
        </div>
        <div class="cotroll-button-pannel-btn" @click="showApplication">
          <div class="cotroll-button-pannel-btn-exit">
            <img src="@/assets/terminalDetail/desktop.png" v-show="isShowApplication"/>
            <img src="@/assets/terminalDetail/desktop_active.png" v-show="!isShowApplication"/>
          </div>
          <div :class="['cotroll-button-pannel-btn-text', !isShowApplication ? 'active' : '']">显示桌面</div>
        </div>
        <div class="cotroll-button-pannel-btn" @click="showApplication">
          <div class="cotroll-button-pannel-btn-exit">
            <img src="@/assets/terminalDetail/control_application.png" v-show="!isShowApplication"/>
            <img src="@/assets/terminalDetail/control_application_active.png" v-show="isShowApplication"/>
          </div>
          <div :class="['cotroll-button-pannel-btn-text', isShowApplication ? 'active' : '']">显示应用</div>
        </div>
        <div class="cotroll-button-pannel-btn" @click="exitControll">
          <div class="cotroll-button-pannel-btn-exit">
            <img src="@/assets/terminalDetail/exit.png"/>
          </div>
          <div class="cotroll-button-pannel-btn-text">退出远程</div>
        </div>
      </div>
    </div>
    <div class="terminal-detail-body">
      <div class="terminal-detail-body-left" ref="terminalDetailBodyLeft" :style="{height: terminalDetailBodyRightHeight + 'rem'}">
        <div class="terminal-detail-body-title" ref="leftBodyTitle" >
          <span class="title">素材中心</span>
          <el-button size="mini" :type="fileType == 1 ? 'primary' : ''" @click="changeFileType(1)">服务器</el-button>
          <el-button size="mini" :type="fileType == 2 ? 'primary' : ''" @click="changeFileType(2)">快捷列表</el-button>
        </div>
        <div class="terminal-detail-body-menu" ref="leftBodyMenu" >
          <span>筛选：</span>
          <span>
            <select class="mediaTypeSelector" @change="mediaTypeSelect" v-model="mediaTypeSelectValue">
              <option v-for="item in mediaTypeList" :value="item.value" >{{item.name}}</option>
            </select>
          </span>
        </div>
        <div class="extraRight" v-if="isFullscreen && isShowMousePannel" :style="{left: windowWidth+'px'}"></div>
        <div class="extraBottom" v-if="isFullscreen && isShowMousePannel" :style="{top: windowHeight+'px', width: windowWidth+120 + 'px'}"></div>
        <!-- 素材 -->
        <div class="terminal-detail-body-left-file">
          <!-- <fodder-list :list="selectFileList" @other="manyouMethods" @add="handleAdd"></fodder-list> -->

          <div class="terminal-detail-body-left-back" v-if="parentId != 0" @click="mediaBack">
            返回上一层
          </div>
          <draggable
            v-model="selectFileList"
            forceFallback="true"
            :group="{name:'fodder',pull:'clone',put:'false'}"
            animation="0"
            :sort="false"
            touchStartThreshold="0px"
            dragClass="dragClass"
            ghostClass="ghostClass"
            chosenClass="chosenClass"
            :delay="500"
            @start="(e) => onLeftStart(e, selectFileList)"
            @end="(e) => onLeftEnd(e, selectFileList)"
            @move="(e) => onLeftMove(e, selectFileList)"
          >
            <div class="item" data-index="j" v-for="(row, j) in selectFileList" :key="row.id"
              @dblclick="onDoubleClick(row)">
              <div class="item_view">
                <div class="item_type">{{row.mediaTypeName}}</div>
                <!-- @error="mediaImageError(row)"  -->
                <img class="item_view-img" :src="row.file_type == 1 ? defaultFolderImage : row.image ? row.image : row.media_type == 2 ? row.media_link : row.defaultImage" @error="mediaImageError(row)" fit="cover" />
                <div class="item_name">{{row.media_name}}</div>
              </div>
            </div>
          </draggable>
        </div>
      </div>
      <div class="terminal-detail-body-content">
        <div class="terminal-detail-body-content-screen">
          <!-- <el-radio-group v-model="currentScreen" size="small"> -->
            <!-- <el-radio-button class="terminal-detail-body-content-screen-button" v-for="(item, index) in windowScreenList" :label="item.name"></el-radio-button> -->
          <!-- </el-radio-group> -->
          <!-- <el-tabs style="height:1.6rem" v-model="currentScreen" > -->
              <!-- <el-tab-pane v-for="(item, index) in windowScreenList" :label="item.name"></el-tab-pane> -->
              <!-- <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane> -->
              <!-- <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane> -->
              <!-- <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane> -->
            <!-- </el-tabs> -->
          <div :class="['screen-button-container',`${item.id == selectWindowScreen ? 'text-active': ''}`]"
          @click="changeScreen(item)" v-for="(item, index) in windowScreenList">
            <div class="screen-button-container-name">{{item.name}}</div>
            <div class="screen-button-container-size">
              <span :class="['screen-button-container-size-text',`${item.id == selectWindowScreen ? 'border-active': ''}`]">
                {{item.size}}
              </span>
            </div>
          </div>
        </div>
        <div class="terminal-detail-body-content_main" ref="contentMain">
          <div v-show="isShowBarrage" class="barrage">
            <el-table
              :data="barrageData"
              style="width: 100%"
              @cell-dblclick="handleCellDbclick">
              <el-table-column
                type="index"
                label="序号"
                width="50">
              </el-table-column>
              <el-table-column
                prop="title"
                label="名称"
                width="180">
              </el-table-column>
              <el-table-column
                prop="content"
                label="内容">
                <template slot-scope="scope">
                  <div class="captions-content" v-html="scope.row.text"></div>
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
                width="80">
                <template slot-scope="scope">
                  <el-switch v-model="scope.row.open" :active-value="1"  :inactive-value="0" @change="handleCaptionsOpen(scope.row, scope.$index)">
                  </el-switch>
              </template>
              </el-table-column>
            </el-table>
          </div>
          <!--中间流播放详情-->
          <!-- @mousemove.stop="touchstart" -->
          <div ref="screenWidth" :style="{width: screenWidth + 'px',height: screenHeight + 'px',
                    margin: '0 auto', 'margin-top': screenTop + 'px'}"
             v-if="!isShowBarrage && showCurrentScreen"
             @mousedown="physicalLeftClickDown"
             @mouseup="physicalLeftClickUp"
             @touchstart="physicalLeftClickDown"
             @touchend="physicalLeftClickUp"
             @mousemove="touchstart"
             @touchmove="touchstart"
             @wheel="physicalMoveScrollBarFun"
             @contextmenu.prevent="physicalRightClick">
            <template v-if="mode === ''">
              <div :class="['window', `window-${windows.length}`]" ref="windows">


               <div class="video-bg" v-if="clientDetail.ip" :style="{width: screenWidth + 'px',height: screenHeight + 'px'}">
<!--                 <live-player :video-url="`ws://${clientDetail.ip}:8080/stream/V4.live.flv`" live='true' aspect="fullscreen" stretch="true"></live-player>-->

                 <!--                    <live-player :video-url="`http://${clientDetail.ip}:8889/stream/V4`" live='true' aspect="fullscreen" stretch="true"></live-player>-->
                   <iframe :src="`http://${clientDetail.ip}:8889/stream/` + currentScreen.stramAddress" class="vendor-view__iframe"></iframe>
                </div>
                  <!-- `http://10.206.1.69:8888` -->
                  <!-- <div class="video-bg">
                    <HlsVideo
                      :hls-url="`http://${clientDetail.ip}:8888`"
                    ></HlsVideo>
                </div> -->
                <!--背景虚线框-->
                <!-- <div class="window-block-container" v-if="currentLayout.vertical && currentLayout.layoutType === 'other'">
                  <div class="window-block-row" v-for="(item, index) in parseInt(currentLayout.vertical)">
                    <div
                      :style="`width: ${Math.floor(middleWindowWidth/currentLayout.vertical) - 1}px;height: ${Math.floor(middleWindowHeight/currentLayout.horizontal)+ 1}px`"
                      class="window-block-col"
                      v-for="(item, index) in parseInt(currentLayout.horizontal)"
                    ></div>
                  </div>
                </div> -->
                <!-- :style="layoutWindows[i].coordinate?JSON.parse(layoutWindows[i].coordinate): ''" -->

                <div :class="['window-item', `window-item-${i}`, `${activeWindow == i?'window-item-active': ''}`]"
                     v-for="(item, i) in windows"
                     v-show = "mode != 'manyou'"
                     :key="i"
                     :data-actindex="i"
                     :item="item"
                     @click="handleSelect(i)"
                     :style="layoutWindows.length > 0 ? (layoutWindows[i].coordinate != undefined && layoutWindows[i].coordinate != null? JSON.parse(layoutWindows[i].coordinate): '') : ''"
                     >
                  <template>
                    <draggable
                      class="window-draggable"
                      forceFallback="true"
                      group="fodder"
                      :data-actindex="i"
                      animation="0"
                      :sort="false"
                      touchStartThreshold="0px"
                      dragClass="dragClass"
                      ghostClass="ghostClass"
                      chosenClass="chosenClass"
                      filter=".window-item-no"
                      @end="(e) => onEndWindow(e, item.list)"
                    >
                      <div v-if="item.image" class="window-item-no" :data-actindex="i">{{ item.content }}</div>
                      <div v-else-if="item.id" class="window-item-no" :data-actindex="i">{{ item.content.showList ? item.content.showList[0].name : item.content }}</div>
                    </draggable>
                  </template>
                </div>
              </div>
            </template>
            <template v-if="mode === 'manyou' && showCurrentScreen">
              <!-- <div :class="{windowMask: isFullscreen}"> -->
                <!-- <div ref="controlPanel" class="control-panel"  :style="{top: mouseTop + 'px', left: mouseLeft + 'px'}"
                    v-show="isFullscreen && isShowMousePannel">
                  <div class="left"
                    @mousedown="mouseLeftDown"
                    @mouseup="mouseLeftUp"
                    @mousemove="mouseLeftMove"
                    @touchstart="mouseLeftDown"
                    @touchend="mouseLeftUp"
                    @touchmove="mouseLeftMove"
                    v-show="hideScrollBar"
                  >
                  </div>
                  <div class="scrollBar">
                    <el-slider
                      ref="slider"
                      v-model="scrollBarValue"
                      :min="-100"
                      :max="100"
                      :show-tooltip="false"
                      vertical
                      :class="hideScrollBar ? 'sliderBar' : ''"
                      @mousedown.native="showScrollBarFun"
                      @mouseup.native="hideScrollBarFun"
                      @mousemove.native="moveScrollBarFun"
                      @touchstart.native="showScrollBarFun"
                      @touchend.native="hideScrollBarFun"
                      @touchmove.native="moveScrollBarFun"
                      height="100px">
                    </el-slider>
                  </div>
                  <div class="middle"
                    @mousedown="remoteControllMouseDown"
                    @mouseup="remoteControllMouseUp"
                    @touchstart="remoteControllMouseDown"
                    @touchend="remoteControllMouseUp"
                    v-show="hideScrollBar"
                  >
                  </div>
                  <div class="right" @click="mouseRightClick"
                    v-show="hideScrollBar">
                  </div>
                </div> -->
              <!-- </div> -->
              <div
                class="window"
                :class="{videoBgFullscreen: isFullscreen}"
                ref="windowDom"
                @mousemove="remoteControllMouseMove"
                @touchmove="remoteControllMouseMove"
                @mouseup="hideScrollBarFun"
                @drop="(ev) => {dropNewHandler(ev, scope.row)}"
              >
                <div class="window-block-container" :style="{width: screenWidth + 'px',height: screenHeight + 'px'}" v-if="manyouLayout.row && manyouLayout.col">
                  <div class="window-block-row" v-for="(item, indexH) in parseInt(manyouLayout.row)">
                    <div
                      :style="{width: manyouLayoutWidth + 'px', height: manyouLayoutHeight + 'px',color: '#fff'}"
                      class="window-block-col"
                      :manyouTop="manyouLayoutHeight * indexH"
                      :manyouLeft="manyouLayoutWidth*indexW"
                      v-for="(item, indexW) in parseInt(manyouLayout.col)"
                      v-if="indexW < parseInt(manyouLayout.col)-1 && indexH < parseInt(manyouLayout.row)-1"
                    ></div>
                    <!-- 无法除尽的在最后行、列补齐 -->
                    <div
                      :style="{width: screenWidth - manyouLayoutWidth * indexW + 'px', height: manyouLayoutHeight + 'px',color: '#fff'}"
                      class="window-block-col"
                      :manyouTop="manyouLayoutHeight * indexH"
                      :manyouLeft="manyouLayoutWidth * indexW"
                      v-for="(item, indexW) in parseInt(manyouLayout.col)"
                      v-if="indexW == parseInt(manyouLayout.col)-1 && indexH != parseInt(manyouLayout.row)-1"
                    ></div>
                    <div
                      :style="{width: manyouLayoutWidth + 'px',
                      height: screenHeight - manyouLayoutHeight * indexH + 'px',color: '#fff'}"
                      class="window-block-col"
                      :manyouTop="manyouLayoutHeight * indexH"
                      :manyouLeft="manyouLayoutWidth * indexW"
                      v-for="(item, indexW) in parseInt(manyouLayout.col)"
                      v-if="indexH == parseInt(manyouLayout.row)-1 && indexW != parseInt(manyouLayout.col)-1"
                    ></div>
                    <div
                      :style="{width: screenWidth - manyouLayoutWidth * indexW + 'px',
                      height: screenHeight - manyouLayoutHeight * indexH + 'px',color: '#fff'}"
                      class="window-block-col"
                      :manyouTop="manyouLayoutHeight * indexH"
                      :manyouLeft="manyouLayoutWidth * indexW"
                      v-for="(item, indexW) in parseInt(manyouLayout.col)"
                      v-if="indexH == parseInt(manyouLayout.row)-1 && indexW == parseInt(manyouLayout.col)-1"
                    ></div>
                  </div>
                </div>
                <div ref="controlPanel" class="control-panel"  :style="{top: mouseTop + 'px', left: mouseLeft + 'px'}"
                    v-show="isFullscreen && isShowMousePannel">
                  <div class="left"
                    @mousedown="mouseLeftDown"
                    @mouseup="mouseLeftUp"
                    @mousemove="mouseLeftMove"
                    @touchstart="mouseLeftDown"
                    @touchend="mouseLeftUp"
                    @touchmove="mouseLeftMove"
                    v-show="hideScrollBar"
                  >
                  </div>
                  <div class="scrollBar">
                    <el-slider
                      ref="slider"
                      v-model="scrollBarValue"
                      :min="-100"
                      :max="100"
                      :show-tooltip="false"
                      vertical
                      :class="hideScrollBar ? 'sliderBar' : ''"
                      @mousedown.native="showScrollBarFun"
                      @mouseup.native="hideScrollBarFun"
                      @mousemove.native="moveScrollBarFun"
                      @touchstart.native="showScrollBarFun"
                      @touchend.native="hideScrollBarFun"
                      @touchmove.native="moveScrollBarFun"
                      height="100px">
                    </el-slider>
                  </div>
                  <div class="middle"
                    @mousedown="remoteControllMouseDown"
                    @mouseup="remoteControllMouseUp"
                    @touchstart="remoteControllMouseDown"
                    @touchend="remoteControllMouseUp"
                    v-show="hideScrollBar"
                  >
                  </div>
                  <div class="right" @click="mouseRightClick"
                    v-show="hideScrollBar">
                  </div>
                </div>
                <!-- <div class="video-bg">
                    <HlsVideo
                      :hls-url="`http://${clientDetail.ip}:8888`"
                    ></HlsVideo>
                </div> -->

                <div class="video-bg" v-if="clientDetail.ip" :style="{width: screenWidth + 'px',height: screenHeight + 'px'}">
<!--                  <live-player :video-url="`ws://${clientDetail.ip}:8080/stream/V4.live.flv`" live='true' aspect="fullscreen" stretch="true"></live-player>-->
                  <!--                    <live-player :video-url="`http://${clientDetail.ip}:8889/stream/V4`" live='true' aspect="fullscreen" stretch="true"></live-player>-->

                    <iframe :src="`http://${clientDetail.ip}:8889/stream/` + currentScreen.stramAddress" class="vendor-view__iframe"></iframe>
                </div>
              </div>
            </template>
            <div :class="[1].includes(+select.mediaType)?'terminal-detail-body-content_main-option terminal-detail-body-content_main-option-video': 'terminal-detail-body-content_main-option'" v-if="select && select.mediaType" v-show="!isMinWindow">
              <div v-if="[1].includes(+select.mediaType)">
                <div class="progress" style="display: flex;width: 100%;align-items: center;color: white;padding-top: .2rem;">
                  <div>{{transformTimerForSecond(videoCurrentPlayTime)}}</div>
                  <PercentBar style="width: 100%;margin: 0 .2rem;" ref="percentBarRef" @change="changePercent"></PercentBar>
                  <div>{{transformTimerForSecond(videoTotalPlayTime)}}</div>
                </div>
              </div>
              <div v-if="[1].includes(+select.mediaType)" class="video">
                <div class="operationBtn videoPlay" @click="playVideo('play')"></div>
                <div class="operationBtn videoPause" @click="playVideo('pause')"></div>
                <div class="operationBtn videoStop" @click="playVideo('stop')"></div>
                <div class="operationBtn videoReplay" @click="playVideo('replay')"></div>
                <img src="@/assets/terminalDetail/voice_not.png" @click="playVideoVoice('unslience')" v-if="!videoVoice" style="margin-left: 8%">
                <img src="@/assets/terminalDetail/voice.png" @click="playVideoVoice('silence')" v-if="videoVoice" style="margin-left: 8%">

                <PercentBar style="width: 20%;margin: 0 .2rem;height: .1rem;"  ref="percentAudioBarRef" @change="changeAudioPercent"></PercentBar>
                <div class="audio-words">{{audioPercent}}%</div>
              </div>
              <!--图片模式-->
              <div v-if="[2].includes(+select.mediaType)" class="image">
                <div class="operationBtn imagePlay" @click="controlImage('play')"></div>
                <div class="operationBtn imagePause" @click="controlImage('pause')"></div>

                <div class="sum-warp">
                  <input class="sum-warp-text" v-model="autoPlayImageNum" type="text">
                  <div class="unit">s</div>
                </div>

                <div class="operationBtn imageFirst" @click="controlImage('first')"></div>
                <div class="operationBtn imagePrevious" @click="controlImage('previous')"></div>
                <div class="operationBtn imageNext" @click="controlImage('next')"></div>
                <div class="operationBtn imageLast" @click="controlImage('last')"></div>
              </div>
              <div v-if="[3].includes(+select.mediaType)" class="image">
                <div class="operationBtn imagePlay" @click="controlImage('play')" v-if="isPPtOffice"></div>
                <div class="operationBtn imagePause" @click="controlImage('pause')" v-if="isPPtOffice"></div>
                <div v-if="isPPtOffice" class="sum-warp">
                  <input class="sum-warp-text" v-model="autoPlayImageNum" type="text">
                  <div class="unit">s</div>
                </div>

                <div class="operationBtn imageFirst" @click="controlImage('first')" v-if="isPPtOffice"></div>
                <div class="operationBtn imagePrevious" @click="controlImage('previous')"></div>
                <div class="operationBtn imageNext" @click="controlImage('next')"></div>
                <div class="operationBtn imageLast" @click="controlImage('last')" v-if="isPPtOffice"></div>
              </div>

              <div v-if="[4].includes(+select.mediaType)" class="application">
                <div class="operationBtn applicationReplay" @click="controlApplication('refresh')"></div>
                <div class="operationBtn applicationClose" @click="controlApplication('close')"></div>
              </div>
              <div v-if="[5].includes(+select.mediaType)" class="web">
                <div class="operationBtn webPrevious" @click="controlWebApplication('prev')"></div>
                <div class="operationBtn webNext" @click="controlWebApplication('next')"></div>
                <div class="operationBtn webReplay" @click="controlWebApplication('refresh')"></div>

                <div class="progress">
                  <el-input placeholder="请输入网址" v-model="routerUrl" class="input-with-select">
                    <span slot="append" @click="controlWebApplication('navigate')" style="cursor: pointer;font-size:.24rem">跳转</span>
                  </el-input>
                </div>
                <el-popover
                  ref="historyPopover"
                  placement="top"
                  width="400"
                  trigger="click"
                >
                  <div class="website-list-body">
                    <div class="website-list-row" v-for="(item, index) in historyWebsite">
                      <div class="website-list-col" @click="controlWebApplication('navigate', item)">{{index+1}}. {{item.name}}</div>
                    </div>
                  </div>
                  <img src="@/assets/terminalDetail/history.png" slot="reference" style="width: .45rem;"/>
                </el-popover>
              </div>
              <div v-if="[7].includes(+select.mediaType)" class="application">
              </div>
              <div v-if="[8].includes(+select.mediaType)" class="application">
                <div class="operationBtn programPlay" @click="playShow('play')"></div>
                <div class="operationBtn programStop" @click="playShow('stop')"></div>
                <div class="operationBtn programPrev" @click="playShow('prev')"></div>
                <div class="operationBtn programNext" @click="playShow('next')"></div>

              </div>

              <div v-if="[9].includes(+select.mediaType)" class="video">
                <div class="operationBtn videoPlay" @click="playStream('play')"></div>
                <div class="operationBtn videoStop" @click="playStream('stop')"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="terminal-detail-body-content_operation">
          <div class="terminal-detail-body-content_operation_left" ref="operationLeft">
            <div class="operation-btn-container" @click="clearAll">
              <div class="operation-btn-container-img">
                <img src="@/assets/terminalDetail/home.png"/>
              </div>
              <div class="operation-btn-container-text">清屏</div>
            </div>
            <div class="operation-btn-container" @click="handleClear">
              <div class="operation-btn-container-img">
                <img src="@/assets/terminalDetail/delete.png"/>
              </div>
              <div class="operation-btn-container-text">删除</div>
            </div>
            <div class="operation-btn-container" @click="minWindow">
              <div class="operation-btn-container-img">
                <img src="@/assets/terminalDetail/system.png"/>
              </div>
              <div class="operation-btn-container-text">系统</div>
            </div>
            <div class="operation-btn-container" @click="maxWindow">
              <div class="operation-btn-container-img">
                <img src="@/assets/terminalDetail/application.png"/>
              </div>
              <div class="operation-btn-container-text">应用</div>
            </div>
            <div class="operation-btn-container" style="z-index: 11;" v-show="!lock" title="长按3秒锁定"
                      v-longpress="() => handleLock()">
              <div class="operation-btn-container-img">
                <img src="@/assets/terminalDetail/lock.png"/>
              </div>
              <div class="operation-btn-container-text">锁定</div>
            </div>
            <div class="operation-btn-container" style="z-index: 11;" v-show="lock" title="长按3秒解锁"
                      v-longpress="() => handleUnlock()">
              <div class="operation-btn-container-img">
                <img src="@/assets/terminalDetail/unlock.png"/>
              </div>
              <div class="operation-btn-container-text">解锁</div>
            </div>
            <div class="operation-btn-container" @click="remoteControll">
              <div class="operation-btn-container-img">
                <img src="@/assets/terminalDetail/control.png"/>
              </div>
              <div class="operation-btn-container-text">反向控制</div>
            </div>
            <div class="operation-btn-container" @click="handleBarrage">
              <div class="operation-btn-container-img">
                <img src="@/assets/terminalDetail/caption.png"/>
              </div>
              <div class="operation-btn-container-text">字幕</div>
            </div>
          </div>
          <div class="terminal-detail-body-content_operation-right" ref="operationRight">

            <div class="right-operation-btn-container" @click="showClearQueueDialogFun(1)">
              <div class="operation-btn-container-img">
                <img src="@/assets/terminalDetail/free.png"/>
              </div>
              <div class="operation-btn-container-text">自由模式</div>
            </div>
            <div class="right-operation-btn-container" v-for="(item, i) in layoutList" :key="i" fit="contain" @click="showClearQueueDialogFun(2,item.windows, item, 'default')">
              <div class="operation-btn-container-img">
                <img :src="item.image"/>
              </div>
              <div class="operation-btn-container-text">{{item.title}}</div>
            </div>
          </div>
        </div>
      </div>
      <transition name="expand">
        <div class="terminal-detail-body-right-hide" v-if="hideScenePanelStatus">
          <div class="terminal-detail-body-right-hide_title">
            <span class="terminal-detail-body-right_title_button" @click="expandScenePanel">
              <img src="@/assets/terminalDetail/hide.png"/>
              <a>展开</a>
            </span>
          </div>
        </div>
      </transition>
      <transition name="expand">
        <div class="terminal-detail-body-right" v-if="showScenePanelStatus" ref="terminalDetailBodyRight" :style="{height: terminalDetailBodyRightHeight + 'rem'}">
          <div class="terminal-detail-body-right_title" ref="rightBodyTitle">
            <span class="terminal-detail-body-right_title_text">场景列表</span>
            <span class="terminal-detail-body-right_title_button" @click="hideScenePanel">
              <img src="@/assets/terminalDetail/up.png"/>
              <a>收起</a>
            </span>
          </div>
          <div class="terminal-detail-body-right_body">
              <draggable
                v-model="sceneList"
                forceFallback="true"
                group="vehicle-station"
                animation="0"
                :sort="false"
                touchStartThreshold="0px"
                dragClass="dragClass"
                ghostClass="ghostClass"
                chosenClass="chosenClass"
                :delay="500"
                @start="onStart"
                @end="onEnd">
                <div class="scene-item" v-for="item in sceneList"  v-clickoutside="() => handleClose(item)">
                  <el-popover
                    placement="left"
                    width="200"
                    trigger="manual"
                    v-model="item.visible">
                    <div slot="reference" @click="handleSelectScene(item)">
                      <div class="scene-item_view" v-longpress="() => handlepoPover(item)">
                        <img class="scene-item_view-img" :src="item.image != null ? item.image : defaultSceneImage" :onerror="defaultSceneImage" fit="contain" />
                        <div class="scene-item_name">{{item.title}}</div>
                      </div>
                    </div>
                    <div class="scene-operate">
                      <el-button type="primary" @click="handleSaveScene(item)">保存场景</el-button>
                      <el-button type="primary" @click="handleUpdateScene(item)">修改名称</el-button>
                      <!-- <el-button type="danger" @click="handleDeleteScene(item)">删除场景</el-button> -->
                    </div>
                  </el-popover>
                </div>
              </draggable>
          </div>
        </div>
      </transition>
    </div>
    <el-dialog title="修改字幕" :visible.sync="dialogCaptionsVisible">
      <div class="dm-position-row">
        <div @click="setDmPos(1)" :class="contentForm.type == 1? 'dm-position-col dm-position-col-active': 'dm-position-col'">
          左对齐
        </div>
        <div @click="setDmPos(2)" :class="contentForm.type == 2? 'dm-position-col dm-position-col-active': 'dm-position-col'">
          水平居中
        </div>
        <div @click="setDmPos(3)" :class="contentForm.type == 3? 'dm-position-col dm-position-col-active': 'dm-position-col'">
          右对齐
        </div>
        <div @click="setDmPos(4)" :class="contentForm.type == 4? 'dm-position-col dm-position-col-active': 'dm-position-col'">
          上对齐
        </div>
        <div @click="setDmPos(5)" :class="contentForm.type == 5? 'dm-position-col dm-position-col-active': 'dm-position-col'">
          垂直居中
        </div>
        <div @click="setDmPos(6)" :class="contentForm.type == 6? 'dm-position-col dm-position-col-active': 'dm-position-col'">
          下对齐
        </div>

        <div class="dm-position-col">
          <el-button type="primary">仿真</el-button>
        </div>

        <div class="dm-position-col">
          备注：仿真表示将字幕信息临时推送到终端，展示出来。
        </div>
      </div>
      <Editor
        @on-change="changeDmContent"
        :value="contentForm.content"
        :min-height="320"
      ></Editor>
      <span slot="footer" class="dialog-footer">
      <el-button @click="dialogCaptionsVisible = false">取 消</el-button>
      <el-button type="primary" @click="saveCaptions">确 定</el-button>
    </span>
    </el-dialog>

    <el-dialog
      title="自由模式"
      :visible.sync="manyouLayoutShow"
      width="40%"
      :before-close="manyouLayoutClose">
      <div>
        <el-form :inline="true" class="demo-form-inline row-control">
          <el-form-item label="行数">
            <el-input type="number" v-model="manyouLayoutEdit.row" class="mayouLayoutInput"></el-input>
          </el-form-item>
          <el-form-item label="列数">
            <el-input type="number" v-model="manyouLayoutEdit.col" class="mayouLayoutInput"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="manyouCancel">取 消</el-button>
        <el-button type="primary" @click="manyouConfirm">确 定</el-button>
      </span>
    </el-dialog>


    <el-dialog
      title="注意"
      :visible.sync="showClearQueueDialog"
      width="40%"
      :before-close="hideClearQueueDialog">
      <div style="padding: 0.2rem;">
        当前有待展示素材向终端传输文件中，若切换模式或场景，则取消该素材的展示（不影响文件传输），是否确认切换？
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="hideClearQueueDialog">取 消</el-button>
        <el-button type="primary" @click="clearQueueConfirm">确 定</el-button>
      </span>
    </el-dialog>

    <TerListDialog
      :show-ter-dialog="showTerDialog"
      ref="terListDialogRef"
      @on-cancel="cancelTerDialog"
      @on-confirm="cancelTerDialog"
    ></TerListDialog>
  </div>
</template>

<script>
import Vue from 'vue/dist/vue.js'
import mpegts from 'mpegts.js'
import format from '@/utils/format'
import fodderList from './components/fodder-list.vue'
import windowItem from './components/window-item.vue'
import PercentBar from "@/views/terminalDetail/components/percentBar.vue";
import {sendCmd} from './utils/sendCmd'
import EventBus from "@/utils/eventBus";
import { getFileListByTerminalId } from './utils/getAllFileByTerminalId'
import {mediaTypeMap,mediaTypeStrMap,suffixFileMapStr} from '@/utils/config'
import {toBase64} from 'js-base64'
import {
  getSceneList,
  getBySceneId,
  saveScene,
  getCaptions,
  openOrClose,
  saveCaptions,
  getLayoutList,
  getClientList,
  quicklySend,
  getSendFileRecord,
} from './service'
import {suffixFileMapObj} from "@/utils/config";
import longpress from '@/directive/longpress'
import Clickoutside from 'element-ui/src/utils/clickoutside';
import Editor from "@/components/Editor/index.vue";
import draggable from 'vuedraggable';
import RtmpLive from "@/views/terminalDetail/components/rtmpLive.vue";
import FlvHttp from "@/views/terminalDetail/components/flvHttp.vue";
import HlsVideo from "@/views/terminalDetail/components/hlsVideo1.vue";
import image from "@/views/terminalDetail/image/four-col.png";
import VueDragResize from "vue-drag-resize";
import Keyboard from 'simple-keyboard';
import 'simple-keyboard/build/css/index.css';
export default {
  components: {
    fodderList,
    draggable,
    windowItem,
    Editor,
    RtmpLive,
    FlvHttp,
    PercentBar,
    HlsVideo
  },
  directives: {
    longpress: longpress(),
    Clickoutside
  },
  data() {
    return {
      continueStatus: true,
      showCurrentScreen: false,
      isMinWindow: false,
      handlerWindowsObj: null,
      sceneWindows: null,
      showClearQueueDialog: false,
      confirmClearQueue: false,
      windowWidth: 0,
      windowHeight: 0,
      recordsList: [],
      waitToShowQueue: [],
      fileCache: null,
      showTerDialog: false,
      mouseScrollLeft: 0,
      mouseScrollTop: 0,
      extraLeft: 0,
      mediaTypeSelectValue: 0,
      parentId: 0,
      mediaHistory: [],
      defaultImage: [
        require('@/assets/terminalDetail/default_video.png'),
        require('@/assets/terminalDetail/default_img.png'),
        require('@/assets/terminalDetail/default_doc.png'),
        require('@/assets/terminalDetail/default_app.png'),
        require('@/assets/terminalDetail/default_web.png'),
        require('@/assets/terminalDetail/default_desktop.png'),
        require('@/assets/terminalDetail/default_other.png'),
        require('@/assets/terminalDetail/default_program.png'),
        require('@/assets/terminalDetail/default_stream.png')
      ],
      defaultFolderImage: require('@/assets/terminalDetail/folder.png'),
      defaultAppImage: require('@/assets/terminalDetail/default_app.png'),
      defaultVideoImage: require('@/assets/terminalDetail/default_video.png'),
      defaultDesktopImage: require('@/assets/terminalDetail/default_desktop.png'),
      defaultDocImage: require('@/assets/terminalDetail/default_doc.png'),
      defaultImgImage: require('@/assets/terminalDetail/default_img.png'),
      defaultOtherImage: require('@/assets/terminalDetail/default_other.png'),
      defaultProgramImage: require('@/assets/terminalDetail/default_program.png'),
      defaultQuickImage: require('@/assets/terminalDetail/default_quick.png'),
      defaultStreamImage: require('@/assets/terminalDetail/default_stream.png'),
      defaultWebImage: require('@/assets/terminalDetail/default_web.png'),
      defaultSceneImage: require('@/assets/terminalDetail/default_scene.png'),
      isDoubleClicked: false,
      manyouLayoutWidth: 0,
      manyouLayoutHeight: 0,
      manyouLayoutShow: false,
      fileType: 1,
      playImageStatus: false,
      hideScrollBar: true,
      scrollBarValue: 0,
      terminalDetailBodyRightHeight: 0,
      rightFileHeight: 0,
      leftFileHeight: 0,
      clientSelected: null,
      clientList: [],
      showScenePanelStatus: true,
      hideScenePanelStatus: false,
      clientName: '',
      mediaTypeList: [],
      moveCache: [],
      leftDownWithMoveY: 0,
      leftDownWithMoveX: 0,
      mouseLeftDownY: 0,
      mouseLeftDownX: 0,
      mouseLeftDownTime: 0,
      isMouseLeftDown: false,
      isMouseLeftDrag: false,
      verClickNum: 0,
      lastClickTime: 0,
      clickTimer: null,
      // currentSceneLayout: null,
      activeCombinationKey: [],
      // combinationKey: ["Ctrl","Shift","Caps","Win"],
      combinationKey: [
        {
          "key": "Ctrl",
          "value": "VK_CONTROL"
        },
        {
          "key": "Shift",
          "value": "VK_SHIFT"
        },
        {
          "key": "Caps",
          "value": "VK_CAPITAL"
        },
        {
          "key": "Win",
          "value": "VK_WIN"
        },
        {
          "key": "Alt",
          "value": "VK_MENU"
        }
      ],
      isShowMousePannel: false,
      isShowApplication: false,
      isShowKeyboard: false,
      remoteControllState: false,
      isFullscreen: false,
      mouseTop: 0,
      mouseLeft: 0,
      handlerWindow: null,
      handlerLayout: null,
      handlerType: null,
      currentWindowId: 0,
      mouseX: 0,
      mouseY: 0,
      mouseChildX: 0,
      mouseChildY: 0,
      screenTop: 0,
      screenHeight: 0,
      screenWidth: 0,
      clientDetail: {},
      selectWindowScreen: null,
      windowScreenList: [],
      createWindowNum: 0,
      mode: '',
      historyWebsite: [],
      autoPlayImageNum: 5,
      currentLayout: {},
      manyouLayout:{
        row: 6,
        col: 6
      },
      manyouLayoutEdit:{
        row: 6,
        col: 6
      },
      videoVoice: true,
      currentDate: '',
      updateTimeId: null,
      currentScreen: {},
      currentScreenItem: {},
      showMoreViewIcon: false,
      sceneList: [],
      audioPercent: 0,
      getPercentTimer: null,
      fileList: suffixFileMapObj(),
      selectFileList: [],
      windows: [],
      player: null,
      baImgSrc: '',
      select: '',
      middleWindowWidth: '',
      middleWindowHeight: '',
      flvPlayer: {},
      activeWindow: null,
      videoMap: new Map(),
      lock: false,
      isShowBarrage: false,
      barrageData: [],
      dialogCaptionsVisible: false,
      contentForm: {},
      layoutList: [],
      layoutWindows: [],
      timer: null,
      playProgrameList: [],
      programeTimer: null,
      routerUrl: '',
      videoCurrentPlayTime: 0,
      videoTotalPlayTime: 0
    }
  },
  computed: {
    transformTimerForSecond() {
      return (row) => {
        if(row == 0) {
          return "00:00:00";
        } else {
          let value = row * 1000
          if (value === 0 || value < 1000) return 0;
          var timestamp = parseInt(value) / 1000; // 毫秒转秒
          // 小时取余数
          const remainder = timestamp % 3600
          // 时、分、秒
          let hour, minute, second;
          if (remainder === 0) { // 整除 小时
            hour = parseInt(timestamp / 3600);
          } else {
            hour = parseInt(timestamp / 3600);
            let remainderMinute = remainder % 60;
            if (remainderMinute === 0) { // 整除 分钟
              minute = parseInt(remainder / 60);
            } else {
              minute = parseInt(remainder / 60);
              second = parseInt(remainderMinute);
            }
          }
          let text = '';
          if (hour > 0) {
            if(hour < 10) {
              text += `0${hour}` + ':';
            } else {
              text += hour + ':';
            }
          }
          if (minute > 0) {
            if(minute < 10) {
              text += `0${minute}` + ':';
            } else {
              text += minute + ':';
            }
          }
          if (second > 0) {
            if(second < 10) {
              text += `0${second}`;
            } else {
              text += `${second}`;
            }
          }
          if(hour <= 0 && minute <= 0) {
            text = `00:00:${text}`
          }
          if(hour <= 0 && minute > 0) {
            text = `00:${text}`
          }
          return text
        }
      }
    },
    isPPtOffice() {
      // 判断文件名是否ppt
      if(this.select.content.indexOf('ppt') !== -1 || this.select.content.indexOf('pptx') !== -1 || this.select.subMode == 'ppt') {
        return true
      } else {
        return false
      }
    },
    id () {
      return this.$route.query.id
    },
    currentWindow () {
      // if(this.mode === '') {
      //   if(this.windows && this.windows[this.select]) {
      //     this.windows[this.select].windowId = parseInt(this.select, 10) + 1
      //   }
      //   return this.select !== '' ? this.windows[this.select] : {}
      // } else if(this.mode === 'manyou') {
      //   return this.select
      // }
      return this.select
    }
  },
  watch: {
    "getPercentTimer"(val) {
    },
    "id"(val) {
      this.$router.go(0);
    },
    "currentWindow.mediaType"(val) {
      setTimeout(() => {
        // this.reCalWidthHeight()
      }, 300)
    },
    "select"(val) {
      this.initSelectedWindow(val.winId == null ? val.windowId : val.winId);
      clearTimeout(this.getPercentTimer)
      this.continueStatus = false;
      if(val.subMode == 'video' || val.subMode == 'movie') {
          this.$nextTick(() => {
            setTimeout(() => {
                this.continueStatus = true;
                // 开始发送获取视频进度的指令
                this.startWatchVideoPercent(val)
                // 获取音频进度
                this.startGetVideoAudioPercent(val)
            }, 500)
          })
      } else {
          this.getPercentTimer = null
      }
    }
  },
  async mounted() {
    //轮询 处理待展示素材
    let _this = this;
    setInterval(() => {
      _this.handleQueue();
    }, 10000);
    //轮询 查看待展示素材文件发送进度
    setInterval(() => {
      _this.getSendRecordList();
    }, 2500);
    this.mediaTypeList = [
      {
        "value": 0,
        "name": "全部"
      },
      {
        "value": 1,
        "name": "视频"
      },
      {
        "value": 2,
        "name": "图片"
      },
      {
        "value": 3,
        "name": "文档"
      },
      {
        "value": 5,
        "name": "网页应用"
      },
      {
        "value": 4,
        "name": "应用程序"
      },
      {
        "value": 8,
        "name": "节目"
      },
      {
        "value": 9,
        "name": "流媒体"
      },
      {
        "value": 6,
        "name": "电脑桌面"
      },
      {
        "value": 7,
        "name": "其他"
      }
    ];
    document.body.style.setProperty('--fodder-bg-color', 'transparent')
    this.getClientList();
    const clientDetail = window.localStorage.getItem('clientDetail')
    if(clientDetail) {
      this.clientDetail = JSON.parse(clientDetail)
      this.clientName = this.clientDetail.name
    }
    // 读取网页历史记录
    this.getWebsiteHistory()
    window.addEventListener('resize', () => {
      this.extraLeft = window.innerWidth
      //判断是否退出全屏 null为退出
      if(document.fullscreenElement == null && this.isFullscreen) {
        // 解除禁止滚动
        document.body.style.overflow = '';
        this.isFullscreen =false;
        this.isShowKeyboard = false;
        this.activeCombinationKey = [];
        sendCmd('max','window',  null, ()=> {
        })

        //恢复可拖拽框
        const targetNodes = document.querySelectorAll('.myDrag');
        targetNodes.forEach((targetNode) => {
          targetNode.style.visibility= '';
        })

        //恢复分割线
        const blockNodes = document.querySelectorAll('.window-block-container');
        blockNodes.forEach((blockNode) => {
          blockNode.style.visibility= '';
        })
      }
      if(this.isFullscreen) {
        //隐藏可拖拽框
        const targetNodes = document.querySelectorAll('.myDrag');
        targetNodes.forEach((targetNode) => {
          targetNode.style.visibility= 'hidden';
        })
        //隐藏分割线
        const blockNodes = document.querySelectorAll('.window-block-container');
        blockNodes.forEach((blockNode) => {
          blockNode.style.visibility= 'hidden';
        })
      }
      this.scrollHeight()
    })
    if(typeof(WebSocket) === "undefined"){
      alert("您的浏览器不支持socket")
    }else{
    }
    EventBus.$emit('hiddenNavbar')
    document.body.style.setProperty('--bg-color', 'transparent')
    document.body.style.setProperty('--border-value', '1px solid #ffffff')

    EventBus.$on('emitActive', (row) => {
      this.select = {...row }
    })
    this.mode  = 'manyou';


    //虚拟键盘初始化
    const keyboard = new Keyboard({
      onKeyPress: button => _this.keyboardOnKeyPress(button)
    });

    //是否之际进入远程控制全屏
    this.$nextTick(() => {
      setTimeout( () => {
        let isFullScreen = _this.$route.query.isFullScreen;
        if(isFullScreen) {
          window.scrollTo(0,0);
          this.remoteControll(null);
        }
      }, 10000)
    })

    this.scrollHeight();
    this.operationLeftScrollInit();
    this.operationRightScrollInit();
  },
  methods: {
    showClearQueueDialogFun(type, windows, item, state){
      this.clearQueueType = type;
      if(type == 2) {
        this.handlerWindowsObj = {
          windows, item, state
        }
      } else if (type == 3) {
        this.sceneWindows = windows;
      }
      if(this.waitToShowQueue.length > 0) {
        this.showClearQueueDialog = true;
      } else {
        this.clearQueueConfirm();
      }
    },
    clearQueueConfirm(){
      if(this.clearQueueType == 1) {
        this.handleRoam();
      } else if(this.clearQueueType == 2){
        this.handlerWindows(this.handlerWindowsObj.windows, this.handlerWindowsObj.item, this.handlerWindowsObj.state)
      } else {
        this.handlerSceneWindows(this.sceneWindows)
      }
      this.clearQueueType = null;
      this.handlerWindowsObj = null;
      this.sceneWindows = null;
      this.showClearQueueDialog = false;
      this.waitToShowQueue = [];
    },
    hideClearQueueDialog() {
      this.showClearQueueDialog = false
    },
    getSendRecordList() {
      let arr = [1,2]
      const params = {
        page: 1,
        pageSize: 1000000,
        statusList: arr
      }
      getSendFileRecord(params).then((res) => {
        this.recordsList = res.data.records.slice()
      })
    },
    handleQueue() {
      let _this = this;
      if(_this.waitToShowQueue.length > 0) {
        let index = 0;
        let queue = JSON.parse(JSON.stringify(_this.waitToShowQueue));
        queue.forEach(item => {
          let content = item.item;
          let sending = _this.recordsList.filter(per => per.id  == item.id);
          if(sending.length == 0) {
            //发送完成，展示素材
            if(item.type == "handleAdd") {
              let index = item.index;
              if(item.handleState) {
                _this.handleAdd(content, index)
              }
            } else {
              if(item.secondType == "openVedioWindow") {
                let window = item.window;
                _this.openVedioWindow(window)
              } else {
                let info = item.info;
                _this.select = {...info};
                //创建窗口
                _this.createNewWindow(info);
                _this.windows.unshift(info);
              }
            }
            _this.waitToShowQueue.splice(index, 1);
            _this.showTerDialog = false;
          }
          index++;
        })
      }
    },
    cancelTerDialog() {
      this.showTerDialog = false
    },
    mediaBack() {
      let length = this.mediaHistory.length;
      if(length > 1) {
        this.parentId = this.mediaHistory[length-2];
        this.mediaHistory.splice(length-1, 1);
      } else {
        this.parentId  = 0;
        this.mediaHistory = [];
      }
      this.selectFileList = [];
      this.getFileListByTerminalId(null);
    },
    mediaImageError(row) {
      let mediaType = row.media_type;
      if(mediaType == 1) {
        row.image = this.defaultVideoImage;
      } else if(mediaType == 2){
        row.image = this.defaultImgImage;
      } else if(mediaType == 3){
        row.image = this.defaultDocImage;
      } else if(mediaType == 4){
        row.image = this.defaultAppImage;
      } else if(mediaType == 5){
        row.image = this.defaultWebImage;
      } else if(mediaType == 6){
        row.image = this.defaultDesktopImage;
      } else if(mediaType == 7){
        row.image = this.defaultOtherImage;
      } else if(mediaType == 8){
        row.image = this.defaultProgramImage;
      } else if(mediaType == 9){
        row.image = this.defaultStreamImage;
      }
    },
    manyouLayoutClose(){
      this.manyouLayoutShow = false;
    },
    manyouCancel() {
      this.manyouLayoutShow = false;
      this.manyouLayoutEdit = {...this.manyouLayout};
    },
    manyouConfirm() {
      this.manyouLayoutShow = false;
      this.manyouLayout.row = null;
      this.manyouLayout = {...this.manyouLayoutEdit};
      this.manyouLayoutWidth = this.middleWindowWidth / this.manyouLayout.col;
      this.manyouLayoutHeight = this.middleWindowHeight / this.manyouLayout.row;
    },
    fileLeftScrollInit() {
      // 获取要绑定事件的元素
      let nav = null;
      nav = this.$refs.terminalDetailBodyLeft;
      var flag; // 鼠标按下
      var downX; // 鼠标点击的x下标
      var scrollLeft; // 当前元素滚动条的偏移量
      nav.addEventListener("mousewheel", function (event) {
        // 获取滚动方向
        const detail = event.wheelDelta || event.detail;
        // 定义滚动方向，其实也可以在赋值的时候写
        const moveForwardStep = 1;
        const moveBackStep = -1;
        // 定义滚动距离
        let step = 0;
        // 判断滚动方向,这里的100可以改，代表滚动幅度，也就是说滚动幅度是自定义的
        if (detail < 0) {
          step = moveForwardStep * 20;
        } else {
          step = moveBackStep * 20;
        }
        // 对需要滚动的元素进行滚动操作
        nav.scrollLeft += step;
      });
    },
    operationLeftScrollInit() {
      // 获取要绑定事件的元素
      let nav = null;
      nav = this.$refs.operationLeft;
      var flag; // 鼠标按下
      var downX; // 鼠标点击的x下标
      var scrollLeft; // 当前元素滚动条的偏移量
      nav.addEventListener("mousewheel", function (event) {
        // 获取滚动方向
        const detail = event.wheelDelta || event.detail;
        // 定义滚动方向，其实也可以在赋值的时候写
        const moveForwardStep = 1;
        const moveBackStep = -1;
        // 定义滚动距离
        let step = 0;
        // 判断滚动方向,这里的100可以改，代表滚动幅度，也就是说滚动幅度是自定义的
        if (detail < 0) {
          step = moveForwardStep * 20;
        } else {
          step = moveBackStep * 20;
        }
        // 对需要滚动的元素进行滚动操作
        nav.scrollLeft += step;
      });
    },
    operationRightScrollInit() {
      // 获取要绑定事件的元素
      let nav = null;
      nav = this.$refs.operationRight;
      var flag; // 鼠标按下
      var downX; // 鼠标点击的x下标
      var scrollLeft; // 当前元素滚动条的偏移量
      nav.addEventListener("mousewheel", function (event) {
        // 获取滚动方向
        const detail = event.wheelDelta || event.detail;
        // 定义滚动方向，其实也可以在赋值的时候写
        const moveForwardStep = 1;
        const moveBackStep = -1;
        // 定义滚动距离
        let step = 0;
        // 判断滚动方向,这里的100可以改，代表滚动幅度，也就是说滚动幅度是自定义的
        if (detail < 0) {
          step = moveForwardStep * 20;
        } else {
          step = moveBackStep * 20;
        }
        // 对需要滚动的元素进行滚动操作
        nav.scrollLeft += step;
      });
    },
    changeFileType(type) {
      this.mediaTypeSelectValue = 0;
      this.fileType = type;
      this.parentId = 0;
      this.mediaHistory = [];
      this.getFileListByTerminalId(null);
    },
    onLeftStart (e, row) {
      this.moveCache = JSON.parse(JSON.stringify(row))
      document.body.style.setProperty('--fodder-bg-color', 'rgba(241, 151, 44, 0.10)')
    },
    onLeftMove(e, list) {

    },
    onLeftEnd (e, list) {
      let toElement = e.to._prevClass ? e.to._prevClass : e.originalEvent.target._prevClass;
      // "terminal-detail-body-content_main"
      //非文件夹才可拖拽
      if(e.item._underlying_vm_.file_type != 1 && (toElement == "window-draggable" || toElement == "content-container" || toElement == "window-block-col")) {
        e.preventDefault()
        // 拖拽素材计算坐标
        if(e.originalEvent.type == "touchend"){
          this.mouseX = e.offsetX == null ? (e.originalEvent.pageX == null ? e.originalEvent.changedTouches[0].pageX : e.originalEvent.pageX)  - this.$refs.screenWidth.getBoundingClientRect().left + document.documentElement.scrollLeft : e.offsetX;
          this.mouseY = e.offsetY == null ? (e.originalEvent.pageY == null ? e.originalEvent.changedTouches[0].pageY : e.originalEvent.pageY) - this.$refs.screenWidth.getBoundingClientRect().top + document.documentElement.scrollTop : e.offsetX;
        } else {
          this.mouseX = e.originalEvent.layerX
          this.mouseY = e.originalEvent.layerY
        }
        // this.mouseY = e.offsetY == null ? e.layerY : e.offsetY;

        document.body.style.setProperty('--fodder-bg-color', 'transparent')
        const { originalEvent, newIndex } = e
        if(e.to.dataset.actindex) {
          let fileCache = {
            type: "handleAdd",
            index: e.to.dataset.actindex,
            item: this.moveCache[e.oldIndex]
          }
          this.fileCache = fileCache;
          this.handleAdd(this.moveCache[e.oldIndex], e.to.dataset.actindex)
        } else {
          let fileCache = {
            type: "manyouMethods",
            item: e.item._underlying_vm_
          }
          this.fileCache = fileCache;
          this.manyouMethods(e)
        }
      }
    },
    onDoubleClick(item) {
      if(item.file_type == 1) {
        this.parentId = item.id;
        this.getFileListByTerminalId(null);
        this.mediaHistory.push(item.id);
      }
    },
    showScrollBarFun() {
      this.hideScrollBar = false;
    },
    hideScrollBarFun() {
      this.hideScrollBar = true;
      this.scrollBarValue = 0;
    },
    physicalMoveScrollBarFun(e){
      const delta = event.deltaY;
      this.scrollBarValue = delta;
      this.moveScrollBarFun()
    },
    moveScrollBarFun() {
      if(this.scrollBarValue > 0) {
        sendCmd('scroll','up',  this.scrollBarValue, ()=> {
        })
      } else if(this.scrollBarValue < 0){
        sendCmd('scroll','down',  Math.abs(this.scrollBarValue), ()=> {
        })
      }
    },
    minWindow() {
      //清除可拖拽框
      const targetNodes = document.querySelectorAll('.myDrag');
      targetNodes.forEach((targetNode) => {
        targetNode.style.visibility= 'hidden';
      })
      this.isMinWindow = true;
      sendCmd('min','window',  null, ()=> {
      })
    },
    maxWindow() {
      this.isMinWindow = false;
      sendCmd('max','window',  null, ()=> {
        //恢复可拖拽框
        const targetNodes = document.querySelectorAll('.myDrag');
        targetNodes.forEach((targetNode) => {
          targetNode.style.visibility= '';
        })
      })
    },
    clearAll() {
      if(!this.lock) {
        sendCmd('window', 'closeAll', {}, () => {
          this.select  = {}
          this.windows = [];
          //清除可拖拽框
          const targetNodes = document.querySelectorAll('.myDrag');
          targetNodes.forEach((targetNode) => {
            targetNode.parentNode.removeChild(targetNode);
          })
          sendCmd('window', 'restoreSoftware', {}, () => {
          })
        })
      } else{
        this.$message.error('请先解锁')
      }
    },
    clientSelect(event){
      this.clientList.forEach((item, index) => {
        if(item.id == event.target.value) {
          window.localStorage.setItem('clientDetail', JSON.stringify(item));
        }
      })
      this.$router.push({ path: '/terminal/terminalDetail', query: { id: event.target.value}})
    },
    expandScenePanel(){
      this.hideScenePanelStatus = !this.hideScenePanelStatus;
      setTimeout(() => {
        this.showScenePanelStatus = !this.showScenePanelStatus;
      }, 500)
      setTimeout(() => {
        this.scrollHeight();
      }, 1000)
    },
    hideScenePanel(){
      this.showScenePanelStatus = !this.showScenePanelStatus;
      setTimeout(() => {
        this.hideScenePanelStatus = !this.hideScenePanelStatus;
      }, 500)
      setTimeout(() => {
        this.scrollHeight();
      }, 1000)
    },
    mediaTypeSelect(event){
      this.mediaTypeSelectValue = event.target.value;
      if(event.target.value ==  0) {
        //全部
        this.selectFileList = [];
        this.selectFileList = this.fileList
      } else {
        this.selectFileList = [];
        this.selectFileList = this.fileList.filter(per => per.media_type  == event.target.value)
      }
    },
    changeScreen(item) {
      this.selectWindowScreen = item.id;
      this.currentScreen =  item;
      this.clientDetail.resolution_rate = item.size;
      this.showCurrentScreen = true;
      this.scrollHeight();
      this.getClientWindowList();
    },
    combinationKeyEvent(item) {
      let command = item.value;
      if(this.activeCombinationKey.includes(item.key)){
        //取消
        this.activeCombinationKey = this.activeCombinationKey.filter(per => per != item.key);
        command = command + "_UNLOCK";
      } else {
        //锁定
        this.activeCombinationKey.push(item.key);
        command = command + "_LOCK";
      }
      sendCmd('keyboard', 'press',  command, ()=> {
      })
    },
    keyboardOnKeyPress(button){
      // let row = "";
      // for(let i = 0; i < this.activeCombinationKey.length; i++) {
      //   row = row + "+" + this.activeCombinationKey[i];
      // }
      // row = row + "+" +  button;
      // if(row[0] == "+") {
      //   row = row.substring(1)
      // }
      button = button.replace("{", "").replace("}", "");
      let isLock = false;
      if(button == "tab") {
        button = "VK_TAB"
      } else if(button == "esc") {
        button = "VK_ESCAPE"
      }else if(button == "shift") {
        button = "VK_SHIFT_LOCK";
        isLock = true;
      } else if(button == "ctrl") {
        button = "VK_CONTROL_LOCK";
        isLock = true;
      } else if(button == "caps") {
        button = "VK_CAPITAL_LOCK";
        isLock = true;
      } else if(button == "win") {
        button = "VK_WIN_LOCK";
        isLock = true;
      } else if(button == "alt") {
        button = "VK_MENU_LOCK";
        isLock = true;
      } else if(button == "bksp") {
        button = "VK_BACK"
      } else if(button == "enter") {
        button = "VK_RETURN"
      } else if(button == "space") {
        button = "VK_SPACE"
      }
      sendCmd('keyboard', 'press',  button.toUpperCase(), ()=> {
        if(isLock) {
          setTimeout(() => {
              button = button.replace("_LOCK", "_UNLOCK");
              sendCmd('keyboard', 'press',  button.toUpperCase(), ()=> {
                  this.initKeyboradCombinationKey();
              })
          }, 500)
        } else {
          this.initKeyboradCombinationKey();
        }
      })
    },
    initKeyboradCombinationKey() {
      this.activeCombinationKey.forEach((button) => {
        if(button == "Shift") {
          button = "VK_SHIFT_UNLOCK";
        } else if(button == "Ctrl") {
          button = "VK_CONTROL_UNLOCK";
        } else if(button == "Caps") {
          button = "VK_CAPITAL_UNLOCK";
        } else if(button == "Win") {
          button = "VK_WIN_UNLOCK";
        } else if(button == "Alt") {
          button = "VK_MENU_UNLOCK";
        }
        sendCmd('keyboard', 'press',  button.toUpperCase(), ()=> {
        })
      })
      this.activeCombinationKey = [];
    },
    showMousePannel() {
      this.isShowMousePannel = !this.isShowMousePannel
    },
    showKeyboard() {
      this.isShowKeyboard = !this.isShowKeyboard
      if(!this.isShowKeyboard) {
        this.activeCombinationKey = [];
      }
    },
    showApplication() {
      this.isShowApplication = !this.isShowApplication
      if(this.isShowApplication) {
        sendCmd('max','window',  null, ()=> {
        })
      } else {
        sendCmd('min','window',  null, ()=> {
        })
      }
    },
    exitControll() {
      // 退出远程控制
      this.exitFullScreen();
    },
    remoteControll(e) {
      //远程控制 全屏中间窗口
      this.isFullscreen = true;
      // 禁止滚动
      document.body.style.overflow = 'hidden';
      //清除可拖拽框
      const targetNodes = document.querySelectorAll('.myDrag');
      targetNodes.forEach((targetNode) => {
        targetNode.style.visibility= 'hidden';
      })
      let element = document.documentElement;
      this.launchFullscreen(element);
      this.initControlPannel();
    },
    launchFullscreen(element) {
      //全屏
      if(element.requestFullscreen) {
        element.requestFullscreen();
      } else if(element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen();
      } else if(element.mozRequestFullscreen) {
        element.mozRequestFullscreen();
      } else if(element.msRequestFullscreen) {
        element.msRequestFullscreen();
      }
      setTimeout(() => {
        this.windowWidth = document.documentElement.clientWidth;
        this.windowHeight = document.documentElement.clientHeight;
      },1000)
    },
    exitFullScreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.mozCancelFullScreen) { /* Firefox */
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
        document.webkitExitFullscreen();
      } else if (document.msExitFullscreen) { /* IE/Edge */
        document.msExitFullscreen();
      }
    },
    remoteControllMouseDown() {
      //远程鼠标状态
      this.remoteControllState = true;
    },
    initControlPannel() {
      //初始化鼠标控制面板位置
      sendCmd('min','window',  null, ()=> {
      })
    },
    remoteControllMouseMove(e) {
      //远程鼠标移动
      if((this.remoteControllState && this.isShowMousePannel) || !this.isShowMousePannel) {
        let clientX = e.clientX == null ? e.touches[0].clientX : e.clientX;
        let clientY = e.clientY == null ? e.touches[0].clientY : e.clientY;
        const rateX = Number(this.clientDetail.resolution_rate.split('*')[0])
        const rateY = Number(this.clientDetail.resolution_rate.split('*')[1])
        if(this.isMouseLeftDrag) {
          // this.mouseLeft = e.clientX - 45;
          // this.mouseTop = e.clientY - 35;
          this.mouseLeft = this.isShowMousePannel ? clientX - 20 : clientX;
          this.mouseTop = this.isShowMousePannel ? clientY - 60 : clientY;
        } else {
          // this.mouseLeft = e.clientX - 75;
          // this.mouseTop = e.clientY - 80;
          this.mouseLeft = this.isShowMousePannel ? clientX - 75 : clientX;
          this.mouseTop = this.isShowMousePannel ? clientY - 60 : clientY;
        }
        if(this.mouseLeft < 0) {
          this.mouseLeft = 0
        }
        if(this.mouseTop < 0) {
          this.mouseTop = 0
        }

        if(this.isShowMousePannel) {
          if(this.mouseLeft+150 > window.innerWidth) {
            this.mouseScrollLeft = 120;
            window.scrollTo({
                left: this.mouseScrollLeft,
                top: this.mouseScrollTop,
                behavior: "smooth"
            });
            this.mouseLeft = this.mouseLeft + 120
          } else {
            this.mouseScrollLeft = 0;
            window.scrollTo({
                left: this.mouseScrollLeft,
                top: this.mouseScrollTop,
                behavior: "smooth"
            });
            // this.mouseLeft = this.mouseLeft - 100
          }
          if(this.mouseTop+120 > window.innerHeight) {
            // this.mouseTop = window.innerHeight - 120
            this.mouseScrollTop = 120;
            window.scrollTo({
                left: this.mouseScrollLeft,
                top: this.mouseScrollTop,
                behavior: "smooth"
            });
            this.mouseTop = this.mouseTop + 120
          } else {
            this.mouseScrollTop = 0;
            window.scrollTo({
                left: this.mouseScrollLeft,
                top: this.mouseScrollTop,
                behavior: "smooth"
            });
          }
        }
        let x = rateX / window.innerWidth * this.mouseLeft;
        let y = rateY / window.innerHeight  * this.mouseTop;
        let obj = {
          "x": Math.ceil(x),
          "y": Math.ceil(y)
        }

        if(((this.remoteControllState && this.isShowMousePannel) || !this.isShowMousePannel) && !this.isMouseLeftDrag && this.isFullscreen) {
          sendCmd('mouse','move',  obj, ()=> {
          })
        }
      }
    },
    remoteControllMouseUp() {
      //远程鼠标状态
      this.remoteControllState = false;
    },
    physicalRightClick(){
      //远程鼠标右键双击
      sendCmd('mouse','rightDouble',  null, ()=> {
      })
    },
    physicalLeftClickDown(e){
      //物理左键按下
      if(!this.isShowMousePannel) {
        //记录按下初始位置
        this.mouseLeftDown(e);
      }
    },
    physicalLeftClickUp(e){
      if(!this.isShowMousePannel) {
        this.mouseLeftUp(e)
      }
    },
    mouseLeftDown(e) {
      //左键按下
      //记录按下时间 用于判断是否为双击或拖拽
      this.mouseLeftDownTime = new Date().getTime();
      this.isMouseLeftDown = true;

      //记录按下初始位置
      this.mouseLeftDownX = e.clientX == null ? e.touches[0].clientX : e.clientX;
      this.mouseLeftDownY = e.clientY == null ? e.touches[0].clientY : e.clientY;
    },
    mouseLeftMove(e) {
      //左键拖拽事件
      if(this.isMouseLeftDown) {
        let  nowTime = new Date().getTime();
        //点击超过300毫秒且移动距离超过5像素认为是拖拽事件
        if (nowTime - this.lastClickTime > 300) {
          let clientX = e.clientX == null ? e.touches[0].clientX : e.clientX;
          let clientY = e.clientY == null ? e.touches[0].clientY : e.clientY;

          // const clientDetail = JSON.parse(localStorage.getItem('clientDetail'))
          const rateX = Number(this.clientDetail.resolution_rate.split('*')[0])
          const rateY = Number(this.clientDetail.resolution_rate.split('*')[1])
          let moveX = clientX - this.mouseLeftDownX;
          let moveY = clientY - this.mouseLeftDownY;
          if(Math.abs(moveX) > 5
            || Math.abs(moveY) > 5 ) {
            moveX = window.innerWidth / rateX * moveX;
            moveY = window.innerHeight / rateY * moveY;
            this.leftDownWithMoveX = Math.ceil(moveX);
            this.leftDownWithMoveY =  Math.ceil(moveY);

            this.isMouseLeftDrag = true;
            this.remoteControllState = true;
          }
        }
      }
    },
    mouseLeftUp(e) {
      const _this = this;
      let  nowTime = new Date().getTime();
      if (nowTime - this.lastClickTime < 300) {
        sendCmd('mouse','leftDouble',  null, ()=> {
        })
        //双击
        this.verClickNum++;
        this.lastClickTime = 0;
        this.clickTimer && clearTimeout(this.clickTimer);
        this.isMouseLeftDrag = false;
        this.isMouseLeftDown = false;
        this.remoteControllState = false;
      } else {
        this.lastClickTime = nowTime;
        this.clickTimer = setTimeout(function () {
          if(this.verClickNum > 1){
            this.verClickNum = 1;
            return;
          } else {
            if(!_this.isMouseLeftDrag) {
              //单击
              sendCmd('mouse','leftSingle',  null, ()=> {
              })
              _this.isMouseLeftDrag = false;
              _this.isMouseLeftDown = false;
              _this.remoteControllState = false;
            } else {
              //拖拽
              let dragObj = {
                "x": _this.leftDownWithMoveX,
                "y": _this.leftDownWithMoveY
              }
              sendCmd('mouse','leftDownWithMove',  dragObj, ()=> {
                sendCmd('mouse','leftUp',  null, ()=> {
                  _this.remoteControllMouseMove(e);
                  _this.isMouseLeftDrag = false;
                  _this.isMouseLeftDown = false;
                  _this.remoteControllState = false;
                })
              })
            }
          }
        }, 300);
      }
    },
    mouseRightClick() {
        let  nowTime = new Date().getTime();
        if (nowTime - this.lastClickTime < 300) {
          //远程鼠标右键双击
          sendCmd('mouse','rightDouble',  null, ()=> {
          })
          //双击
          this.verClickNum++;
          this.lastClickTime = 0;
          this.clickTimer && clearTimeout(this.clickTimer);
        } else {
          //单击
          this.lastClickTime = nowTime;
          this.clickTimer = setTimeout(function () {
            if(this.verClickNum > 1){
              this.verClickNum = 1;
              return;
            } else {
              //远程鼠标右键单击
              sendCmd('mouse','rightSingle',  null, ()=> {
              })
            }
          }, 300);
        }
    },
    touchstart(e) {
      // 拖拽素材计算坐标
      this.mouseX = e.offsetX == null ? e.layerX : e.offsetX;
      this.mouseY = e.offsetY == null ? e.layerY : e.offsetY;

      let mousex = e.screenX ?  e.screenX : e.pageX ? e.pageX : e.clientX;
      if(e.target.parentElement.style.left) {
        this.mouseChildX = parseFloat(e.target.parentElement.style.left)
      } else {
        this.mouseChildX = 0
      }
      if(e.target.parentElement.style.top) {
        this.mouseChildY = parseFloat(e.target.parentElement.style.top)
      } else {
        this.mouseChildY = 0
      }
      if (!this.isShowMousePannel && this.isMouseLeftDown){
        this.mouseLeftMove(e)
      }
    },
    scrollHeight: function(){
      if(this.$refs.contentMain) {
        let mainHeight = this.$refs.contentMain.clientHeight;
        let mainWidth = this.$refs.contentMain.clientWidth;
        //动态计算中间回显尺寸
        // const clientDetail = JSON.parse(localStorage.getItem('clientDetail'))
        const rateX = Number(this.clientDetail.resolution_rate.split('*')[0])
        const rateY = Number(this.clientDetail.resolution_rate.split('*')[1])
        let height  = mainHeight * 0.9;
        let orginalTimes = Math.ceil(rateY / height);
        height = rateY / orginalTimes;
        let screenWidth = height / rateY * rateX;
        if(screenWidth+10 > mainWidth) {
          let mainWidhtNew = mainWidth * 0.95;
          let times = Math.ceil(rateX / mainWidhtNew)
          mainWidhtNew = rateX / times;
          this.screenWidth = mainWidhtNew;
          this.screenHeight = mainWidhtNew / rateX * rateY;
        } else {
          this.screenHeight = height;
          this.screenWidth = screenWidth;

        }
        this.screenTop = (window.innerHeight - this.screenHeight - document.documentElement.style.fontSize.split("px")[0] * (1.12 + 1.2 + 1.2 + 1.5)) / 2

        this.middleWindowWidth = this.screenWidth;
        this.middleWindowHeight = this.screenHeight;

        let leftHeight  = this.$refs.terminalDetailBodyLeft.clientHeight;
        let leftTitleHeight  = this.$refs.leftBodyTitle.clientHeight;
        let leftMenuHeight  = this.$refs.leftBodyMenu.clientHeight;
        this.leftFileHeight = leftHeight - leftTitleHeight - leftMenuHeight - 20;

        let rightHeight  = this.$refs.terminalDetailBodyRight.clientHeight;
        let rightTitleHeight  = this.$refs.rightBodyTitle.clientHeight;

        let terminalDetailHeight = this.$refs.terminalDetail.clientHeight;
        let terminalDetailHeaderHeight = this.$refs.terminalHeader.clientHeight;
        let fontSize = (document.documentElement.clientHeight - 42) / 1200 * 100;
        this.terminalDetailBodyRightHeight = ( terminalDetailHeight - terminalDetailHeaderHeight ) / fontSize -0.4;

        this.manyouLayoutWidth = this.middleWindowWidth / this.manyouLayout.col - 0.5;
        this.manyouLayoutHeight = this.middleWindowHeight / this.manyouLayout.row - 0.5;
        // this.rightFileHeight = terminalDetailHeight - terminalDetailHeaderHeight - rightTitleHeight - 80;
      }
    },
    async getExtraScreen() {
      await sendCmd('get', 'extraWindow', {}, (msg) => {
        this.windowScreenList = [];
        let windowObj = JSON.parse(msg);
        let content = windowObj.content;
        if(content.length > 0) {
          let index = 1;
          content.forEach(item => {
            let obj = {
              "id": index,
              "name": item.name,
              "x": item.x,
              "y": item.y,
              "size": item.width + "*" + item.height,
              "width": item.width,
              "height": item.height,
              "stramAddress": item.stramAddress
            }
            this.windowScreenList.push(obj);
            if(index == 1) {
              this.currentScreen = obj;
              this.clientDetail.resolution_rate = obj.size;
              this.changeScreen(obj)
            }
            index++;
          })
        }
        // let obj = {
        //   "id": 2,
        //   "name": "ttt",
        //   "size": "ddd"
        // }
        // this.windowScreenList.push(obj);
        if(this.windowScreenList.length > 0) {
          this.selectWindowScreen = this.windowScreenList[0].id;
        }
      })
    },
    getClientWindowList(){
      sendCmd('get', 'windowList', {}, (msg) => {
        //清除可拖拽框
        const targetNodes = document.querySelectorAll('.myDrag');
        targetNodes.forEach((targetNode) => {
          targetNode.parentNode.removeChild(targetNode);
        })
        this.windows = [];
        if(msg != undefined && msg != null) {
          let windowObj = JSON.parse(msg)

          console.log('指令返回 ---', JSON.stringify(windowObj.content))
          let index = 1;
          let total = windowObj.content.length;
          windowObj.content.forEach((item, key) => {
            let {width, height, x, y, id} = item
            const rateX = Number(this.clientDetail.resolution_rate.split('*')[0])
            const rateY = Number(this.clientDetail.resolution_rate.split('*')[1])
            let calcW = Math.ceil(this.middleWindowWidth / rateX * width) // 计算百分比绘制窗口
            let calcH = Math.ceil(this.middleWindowHeight / rateY * height)
            let top = Math.ceil(this.middleWindowHeight / rateY * y);
            let left = Math.ceil(this.middleWindowWidth / rateX * x);
            if(width == 0 && height == 0) {
              calcW = 1
              calcH = 1
            }
            //left top需要减去当前分屏的x y
            //小于0或大于当前屏幕分辨率的即不属于当前屏幕
            let currentScreen = this.currentScreen;
            let currentScreenX = currentScreen.x;
            let currentScreenY = currentScreen.y;
            let currentScreenWidth = currentScreen.width;
            let currentScreenHeight = currentScreen.height;
            left = left - currentScreenX;
            top = top - currentScreenY;
            if(left >= 0 && top >= 0 && left <= currentScreenWidth && top <= currentScreenHeight) {
              let tmpWindowCoor = {top: `${top}px`, left: `${left}px`, width: `${calcW}px`, height: `${calcH}px`}
              let value = mediaTypeMap[item.subMode];
              let mediaType = mediaTypeMap[item.subMode]?mediaTypeMap[item.subMode]: '';
              let playStatus = 0;
              if(mediaType == 1 || mediaType == 8) {
                playStatus = 1;
              }

              let thisRow = {
                'x': Math.ceil(left),
                'y': Math.ceil(top),
                'coordinate': JSON.stringify(tmpWindowCoor),
                'isInit': true,
                'width': Math.ceil(calcW),
                'height': Math.ceil(calcH),
                'id': item.id,
                'winId': item.id,
                'content': item.content,
                'subMode': item.subMode,
                'mediaType': mediaType,
                'windowId': item.id,
                'playStatus': playStatus,
                "autoTime": 5000
              }
              this.createNewWindow(thisRow);
              this.currentWindowId = thisRow.id;
              let window = {...thisRow};
              window.isInit = false;
              this.windows.unshift(window);
              this.select = {...thisRow}
              if(index == total) {
                //选中
                const targetNode = document.querySelector('.manyou-container-'+thisRow.id);
                targetNode.classList.add('active');
              }
            }
            index++;
          })
        }
      })

    },
    openVedioWindow(item){
      let _this = this;
      if(item.isInit == null || !item.isInit) {
        const row = {...item}
        const rateX = Number(this.clientDetail.resolution_rate.split('*')[0])
        const rateY = Number(this.clientDetail.resolution_rate.split('*')[1])
        let openXPercent = rateX / this.middleWindowWidth
        let openYPercent = rateY / this.middleWindowHeight
        let openWPercent = row.width / this.middleWindowWidth
        let openHPercent = row.height / this.middleWindowWidth
        let sendX = Math.ceil(openXPercent * row.x);
        let sendY = Math.ceil(openYPercent * row.y);

        let name = row.content
        if(row.subMode == 'show'){
          name = row.content.showList[0].name
        }
        const obj = {
          subMode: row.subMode,
          content: row.content,
          id: row.id, //窗口id 不是素材id
          width: Math.ceil(rateX * openWPercent),
          height: Math.ceil(rateX * openHPercent),
          name: name,
          // x: Math.floor(rateX * parseFloat(openXPercent)),
          // y: Math.floor(rateY * parseFloat(openYPercent))
          x: sendX + this.currentScreen.x,
          y: sendY + this.currentScreen.y,
          windowId: row.id,
          winId: row.id
        }
        sendCmd('open','multScreen', obj, (result)=> {
          const data = result.data;
          const cmdResult = JSON.parse(data);
          const cmd = cmdResult.cmd
          const content = cmdResult.content
          if(cmd == "Fail") {
            //文件不存在，向终端发送文件
            let clientIds = [this.clientDetail.id];
            let mediaIds = [item.mediaId];
            const params = {
              clientIds,
              mediaIds
            };
            //清除可拖拽框
            const targetNodes = document.querySelectorAll('.manyou-container-'+row.id);
            targetNodes.forEach((targetNode) => {
              targetNode.parentNode.removeChild(targetNode);
            })
            if(this.fileCache.type == "handleAdd") {
              //分屏模式下，文件发送后展示最新的素材，原来正在发送的文件继续发送但不展示
              this.fileCache.handleState = true;
              this.waitToShowQueue.forEach(item => {
                if(item.index == this.fileCache.index) {
                  item.handleState = false;
                }
              })
            }
            this.waitToShowQueue.push(this.fileCache)
            this.fileCache = null;
            quicklySend(params).then(() => {
              _this.$message.success('发送成功')
              _this.$refs.terListDialogRef.getFileRateList()
              this.showTerDialog = true;
            })
          } else {
            this.fileCache = null;
            _this.select = null;
            _this.select = item;
          }
          //选中
          // _this.initSelectedWindow(item.windowId)
        })
      }
    },
    createNewWindow(row) {
      this.select = row;
      let text = 'edit'
      let item = {
        sort: 0
      }
      const _this = this
      let showText = text === 'edit' ? item.sort : _this.createWindowNum + 1
      const windowLayoutContainer = document.querySelector('.window')
      const windowDom = document.createElement('div')
      windowDom.setAttribute('class', 'new-window-container')
      windowDom.setAttribute('id', 'window-container-' + new Date().getTime())
      windowLayoutContainer.appendChild(windowDom)
      let clientDetail = this.clientDetail
      // if(this.clientDetail) {
        // clientDetail = JSON.parse(clientDetail)
      // }
      // 定义组件
      const MyComponent = Vue.extend({
        components: {
          VueDragResize,
          HlsVideo
        },
        data() {
          return {
            item: {...row},
            isActive:true,
          }
        },
        mounted(){
          this.$nextTick(()=> {
            let {left, top, width, height} = this.$refs.drag
            if(row.x != null) {
              left = row.x;
            }
            if(row.y != null) {
              top = row.y;
            }
            if(row.width != null) {
              width = row.width;
            }
            if(row.height != null) {
              height = row.height;
            }
            _this.openVedioWindow({...this.item, width,height, top, left})
            // if(row.isInit == null || !row.isInit) {
            //   this.playVideo('play')
            // }
          })
        },
        methods: {
          // isActive(str){
          //   const regex = /^active$/;
          //   return regex.test(str);
          // },
          dragTouchstart(e) {
          },
          dragTouchend(item) {
            if(this.isDoubleClicked) {
              this.doubleClickMethod(item);
            } else {
              this.isDoubleClicked = true;
              setTimeout(()=>{
                this.isDoubleClicked = false
              },300)
            }
          },
          clickDragMethods(index) {
            if(!_this.lock) {
              _this.currentDragDom = this.$refs.drag.$el
              _this.select = this.item
              _this.windows.forEach(per => {
                if(per.windowId == this.item.windowId) {
                  _this.select.playStatus = per.playStatus
                  _this.select.autoTime = per.autoTime
                  _this.autoPlayImageNum =  per.autoTime / 1000
                }
              })
              // eventbus 传递子组件点击的值
              EventBus.$emit('emitActive', this.item)
            } else {
              _this.$message.error('请先解锁')
            }
          },
          startDragging(newRect) {
            if(!_this.lock) {
              const rateX = Number(_this.clientDetail.resolution_rate.split('*')[0])
              const rateY = Number(_this.clientDetail.resolution_rate.split('*')[1])
              let openXPercent = (rateX / _this.middleWindowWidth)
              let openYPercent = (rateY / _this.middleWindowHeight)
              const obj = {
                x: newRect.left * openXPercent + _this.currentScreen.x,
                y: newRect.top * openYPercent + _this.currentScreen.y,
                id: this.item.id
              }
              let diffX = rateX - (newRect.width + newRect.left) * openXPercent
              if(diffX < 15) {
                obj.x = rateX - newRect.width * openXPercent + diffX
                newRect.left = newRect.left + diffX/openXPercent
              }
              let diffY = rateY - (newRect.height + newRect.top) * openYPercent
              if(diffY < 15) {
                obj.y = rateY - newRect.height * openYPercent + diffY
                newRect.top = newRect.top + diffY/openYPercent
              }
              for(let i = 0; i < _this.windows.length; i++) {
                let window = _this.windows[i];
                if(window.id = this.item.id) {
                  window.x = newRect.left;
                  window.y = newRect.top;
                }
              }
              sendCmd('move', 'multScreen', obj, ()=> {

              })
            }
          },
          initItem(newRect){
            // const clientDetail = JSON.parse(localStorage.getItem('clientDetail'))
            const rateX = Number(_this.clientDetail.resolution_rate.split('*')[0])
            const rateY = Number(_this.clientDetail.resolution_rate.split('*')[1])
            let openXPercent = (rateX / _this.middleWindowWidth)
            let openYPercent = (rateY / _this.middleWindowHeight)
            const obj = {
              x: newRect.left * openXPercent,
              y: newRect.top * openYPercent,
              id: this.item.id
            }
            for(let i = 0; i < _this.windows.length; i++) {
              let window = _this.windows[i];
              if(window.id = this.item.id) {
                window.x = newRect.left;
                window.y = newRect.top;
              }
            }
          },
          // 双击贴边
          doubleClickMethod(item){
            if(!this.lock) {
              _this.currentDragDom = this.$refs.drag.$el
              this.$nextTick(()=> {
                let isChange = false;
                //手动修改ref的值，因为源码中宽度是通过left和right计算出来的，所以left和right都需要修改
                let parentWidth = this.$refs.drag.parentWidth
                let width = this.$refs.drag.width
                // this.$refs.drag.left = 0
                // this.$refs.drag.right = parentWidth - width

                //行数
                const row = _this.manyouLayout.row
                //列数
                const col = _this.manyouLayout.col
                const containerWidth = _this.middleWindowWidth;
                const containerHeight = _this.middleWindowHeight;
                const drag = this.$refs.drag;
                const dragLeft = drag.left;
                const dragTop = drag.top;
                const dragRight = drag.right;
                const dragBottom = drag.bottom;
                const perWidth = containerWidth / col;
                const perHeight = containerHeight / row;
                //计算左侧覆盖的格子位于第几列
                let newLeftCol = [];
                let newLeftColSame  = false;
                for(let i = 0; i <= col; i++){
                  if(perWidth * i > dragLeft) {
                    // newLeftCol = i - 1;
                    newLeftCol.push(i - 1);
                    break;
                  }
                  if(perWidth * i == dragLeft) {
                    newLeftColSame = true;
                    break;
                  }
                }
                if(!newLeftColSame) {
                  let max = newLeftCol[newLeftCol.length-1];
                  let left = perWidth * max;
                  this.$refs.drag.left = left;
                  isChange = true;
                }
                //计算右侧覆盖的格子位于第几列
                let newRightCol = 0;
                let newRightColSame  = false;
                for(let i = 0; i <= col; i++){
                  if(perWidth * i > (containerWidth - dragRight)) {
                    newRightCol = i;
                    break;
                  }
                  if(perWidth * i == (containerWidth - dragRight)) {
                    newRightColSame  = true;
                    break;
                  }
                }
                if(!newRightColSame) {
                  this.$refs.drag.right = containerWidth - perWidth * newRightCol;
                  isChange = true;
                }
                //计算上面覆盖的格子位于第几行
                let newTopRow = [];
                let newTopRowSame = false;
                for(let i = 0; i <= row; i++){
                  if(perHeight * i > dragTop) {
                    newTopRow.push(i - 1);
                    break;
                  }
                  if(perHeight * i == dragTop) {
                    newTopRowSame = true;
                    break;
                  }
                }
                if(!newTopRowSame) {
                  let max = newTopRow[newTopRow.length-1];
                  let top = perHeight * max;
                  this.$refs.drag.top = top;
                  isChange = true;
                }
                //计算下面覆盖的格子位于第几行
                let newBottomRow = 0;
                let newBottomRowSame = false;
                for(let i = 0; i <= row; i++){
                  if(perHeight * i > (containerHeight - dragBottom)) {
                    newBottomRow = i;
                    break;
                  }
                  if(perHeight * i == (containerHeight - dragBottom)) {
                    newBottomRowSame = true;
                    break;
                  }
                }
                if(!newBottomRowSame) {
                  this.$refs.drag.bottom = containerHeight - perHeight * newBottomRow;
                  isChange = true;
                }
                if(isChange) {
                  const rateX = Number(_this.clientDetail.resolution_rate.split('*')[0])
                  const rateY = Number(_this.clientDetail.resolution_rate.split('*')[1])

                  let openXPercent = (rateX / _this.middleWindowWidth)
                  let openYPercent = (rateY / _this.middleWindowHeight)
                  let obj = {
                    width: this.$refs.drag.width * openXPercent,
                    height: this.$refs.drag.height * openYPercent,
                    x: this.$refs.drag.left * openXPercent + _this.currentScreen.x,
                    y: this.$refs.drag.top * openYPercent + _this.currentScreen.y,
                    windowId: item.windowId,
                    id: item.id
                  }
                  for(let i = 0; i < _this.windows.length; i++) {
                    let window = _this.windows[i];
                    if(window.id = item.id) {
                      window.x = this.$refs.drag.left;
                      window.y = this.$refs.drag.top;
                      window.width = this.$refs.drag.width;
                      window.height = this.$refs.drag.height;
                    }
                  }
                  sendCmd('resize', 'multScreen', {...obj}, ()=> {
                    sendCmd('move', 'multScreen', {...obj}, ()=> {
                    })
                  })
                }
              })
            }
          },
          resizestop(newRect){
            if(!this.lock) {
              // const clientDetail = JSON.parse(localStorage.getItem('clientDetail'))
              const rateX = Number(_this.clientDetail.resolution_rate.split('*')[0])
              const rateY = Number(_this.clientDetail.resolution_rate.split('*')[1])

              // let openWPercent = newRect.width / _this.middleWindowWidth
              // let openHPercent = newRect.height / _this.middleWindowHeight

              // let openXPercent = (newRect.left / _this.middleWindowWidth).toFixed(2)
              // let openYPercent = (newRect.top / _this.middleWindowHeight).toFixed(2)
              // const obj = {
              //   width: Math.ceil(rateX * parseFloat(openWPercent)),
              //   height: Math.ceil(rateY * parseFloat(openHPercent)),
              //   x: Math.ceil(rateX * parseFloat(openXPercent)) + _this.currentScreen.x,
              //   y: Math.ceil(rateY * parseFloat(openYPercent)) + _this.currentScreen.y,
              //   windowId: this.item.windowId,
              //   id: this.item.id
              // }
              let openXPercent = (rateX / _this.middleWindowWidth)
              let openYPercent = (rateY / _this.middleWindowHeight)
              const obj = {
                width: newRect.width * openXPercent,
                height: newRect.height * openYPercent,
                x: newRect.left * openXPercent + _this.currentScreen.x,
                y: newRect.top * openYPercent + _this.currentScreen.y,
                windowId: this.item.windowId,
                id: this.item.id
              }
              for(let i = 0; i < _this.windows.length; i++) {
                let window = _this.windows[i];
                if(window.id = this.item.id) {
                  window.x = newRect.left;
                  window.y = newRect.top;
                  window.width = newRect.width;
                  window.height = newRect.height;
                }
              }
              sendCmd('resize', 'multScreen', {...obj}, ()=> {

                sendCmd('move', 'multScreen', {...obj}, ()=> {

                })
              })
            }
          },
          //回显方法
          echoMethod(){

            let width = 0;
            let height = 0;
            if(row.width == null) {
              width = 150;
            } else {
              width = row.width
            }
            if(row.height == null) {
              height = 150;
            } else {
              height = row.height;
            }
            const rateX = Number(_this.clientDetail.resolution_rate.split('*')[0])
            const rateY = Number(_this.clientDetail.resolution_rate.split('*')[1])
            const topValue = row.y;
            const leftValue = row.x;
            this.$refs.drag.$attrs.detail = {...row}
            this.$refs.drag.top = topValue
            this.$refs.drag.bottom = this.$refs.drag.parentHeight - topValue - height
            this.$refs.drag.left = leftValue
            this.$refs.drag.right = this.$refs.drag.parentWidth - leftValue - width
          },
        },
        template: `<vue-drag-resize
                        ref="drag"
                         @dragstop="startDragging"
                         @resizestop="resizestop"
                         @dblclick.native="doubleClickMethod(item)"
                         :w="50"
                          :h="50"
                          :x="0"
                          :y="0"
                          @clicked="clickDragMethods"
                          @touchstart.native="dragTouchstart"
                          @touchend.native="dragTouchend(item)"
                          data-index="${parseInt(this.createWindowNum, 10) + 1}"
                          class="manyou-container-${row.windowId} myDrag"
                          :parentLimitation="true"
        >

</vue-drag-resize>`
      });

      // 创建组件实例
      const componentInstance = new MyComponent();
      // 挂载到DOM元素上
      componentInstance.$mount(windowDom);
      componentInstance.echoMethod()
      this.windows[this.select] = {
        ...row
      }

      this.$set(this, 'select', {...row})
      this.$nextTick(()=> {
      })

    },
    dropNewHandler(ev) {
    },
    getWebsiteHistory() {
      let historyList = window.localStorage.getItem(`websiteHistory-${this.id}`)
      if(historyList) {
        this.historyWebsite = JSON.parse(historyList)
      }
    },
    playPrograme() {
      this.playProgrameList = this.currentWindow.programs.slice()
      this.startPlayPrograme()
    },
    playShow(control) {
      let cacheDetail = this.select
      sendCmd('show', control, cacheDetail)
      let playStatus = null;
      if(control == "play") {
        this.select.playStatus = 1;
        playStatus = 1;
      } else {
        this.select.playStatus = 0;
        playStatus = 0;
      }
      this.windows.forEach(item => {
        if(item.windowId == this.select.windowId) {
          item.playStatus = playStatus
        }
      })
    },
    startPlayPrograme() {
      if(this.playProgrameList.length === 0) {
        return
      }
      this.playProgrameList.forEach((item) => {
        this.programeTimer = setTimeout(() => {

        }, item.time)
      })
    },
    reCalWidthHeight() {
      // 获取父级宽，高动态计算格子宽高
      // const parentWindowBody = document.querySelector('#video-client-bg')
      // const parentWindowRect = parentWindowBody.getBoundingClientRect()
      // this.middleWindowWidth = parentWindowRect.width
      // this.middleWindowHeight = parentWindowRect.height
    },
    initSelectedWindow(windowId) {
      //清除选中
      const targetNodes = document.querySelectorAll('.myDrag');
      if(targetNodes) {
        targetNodes.forEach((targetNode) => {
          targetNode.classList.remove('active');
        })
      }
      //选中
      const targetNode = document.querySelector('.manyou-container-'+windowId);
      if(targetNode) {
        targetNode.classList.remove('inactive');
        targetNode.classList.add('active');
      }
    },
    controlWebApplication(control, obj, row={}) {
      let cacheDetail = this.select
      let routerUrl = this.routerUrl
      if(obj != null) {
        routerUrl = obj.url;
        this.$refs.historyPopover.doClose();
      }
      cacheDetail.routerUrl = routerUrl
      if(control === 'navigate') {
        sendCmd('webApplication', control, cacheDetail, () => {
          let websiteTmp = {
            url: routerUrl,
            name: routerUrl
          }
          let isExist = false;
          for(let i = 0; i < this.historyWebsite.length; i++) {
            let item = this.historyWebsite[i];
            if(item.url == websiteTmp.url) {
              isExist = true;
              break;
            }
          }
          if(!isExist) {
            this.historyWebsite.push(websiteTmp)
            window.localStorage.setItem(`websiteHistory-${this.id}`, JSON.stringify(this.historyWebsite))
          }
          this.getWebsiteHistory()
        })
      } else {
        sendCmd('webApplication', control, cacheDetail)
      }
    },
    controlApplication(control) {
      let cacheDetail = this.currentWindow
      sendCmd('application', control, cacheDetail)
    },
    controlImage(control) {
      // 图片模式

      if(this.select.mediaType == 2) {
        let cacheDetail = this.select;
        cacheDetail.autoTime = this.autoPlayImageNum * 1000
        sendCmd('image', control, cacheDetail)
      } else if(this.select.mediaType == 3) {
        let cacheDetail = this.select;
        cacheDetail.autoPlayImageNum = this.autoPlayImageNum * 1000
        sendCmd('office', control, cacheDetail)
      }

      let playStatus = null;
      if(control == "play") {
        this.select.playStatus = 1;
        playStatus = 1;
      } else {
        this.select.playStatus = 0;
        playStatus = 0;
      }
      this.windows.forEach(item => {
        if(item.windowId == this.select.windowId) {
          item.playStatus = playStatus
          item.autoTime = this.autoPlayImageNum * 1000
        }
      })
    },
    playVideoVoice(control) {
      this.videoVoice = !this.videoVoice
      let cacheDetail = this.currentWindow
      sendCmd('video', control, cacheDetail)
    },
    playVideo(control) {
      let cacheDetail = this.select
      sendCmd('video', control, cacheDetail)
      let playStatus = null;
      if(control == "play") {
        cacheDetail.playStatus = 1;
        playStatus = 1;
      } else if(control == "pause") {
        cacheDetail.playStatus = 0;
        playStatus = 0;
      } else if(control == "stop") {
        cacheDetail.playStatus = 2;
        playStatus = 2;
      } else {
        cacheDetail.playStatus = 1;
        playStatus = 1;
      }
      this.select = {...cacheDetail}
      this.windows.forEach(item => {
        if(item.windowId == this.select.windowId) {
          item.playStatus = playStatus
        }
      })
      if(this.getPercentTimer) {
        this.continueStatus = false;
        clearTimeout(this.getPercentTimer)
        this.getPercentTimer = null
      }
      if(playStatus ==  1) {
        this.$nextTick(() => {
          setTimeout(() => {
            this.continueStatus = true;
            // 开始发送获取视频进度的指令
            this.startWatchVideoPercent(this.select)
            // 获取音频进度
            this.startGetVideoAudioPercent(this.select)
          }, 2000)
        })
      }

    },
    playStream(control){
      let cacheDetail = this.select
      sendCmd('stream', control, cacheDetail)
    },
    updateTime () {
      this.updateTimeId = setInterval(() => {
        this.currentDate = format(new Date(), 'YYYY/MM/DD hh:mm:ss')
      }, 1000)
    },
    back () {
      // this.$router.back()
      this.$router.push(`/terminalNewHome`)
    },
    async getFileListByTerminalId (val) {
      const res = await getFileListByTerminalId(this.id, this.fileType, this.parentId, val, this.mediaTypeSelectValue)
      let _this = this;
      res.forEach(item => {
        item.mediaTypeName =  suffixFileMapStr[item.media_type]
        if(item.file_type == 1) {
          item.mediaTypeName = "文件夹";
        }
        item.defaultImage = _this.defaultImage[(item.media_type-1)]
      })
      this.fileList = res;
      this.selectFileList = res;
      this.scrollHeight();
      // 调终端查窗口信息
      this.getClientWindowList();
    },
    async getSceneList () {
      const res = await getSceneList({
        page: 1,
        pageSize: 20,
        clientId: this.id,
      })
      this.sceneList = res.data.records;

    },
    handleSelectScene (item) {

    },
    handlepoPover (item) {
      item.visible = true
    },
    handleClose (item) {
      item.visible = false
    },
    async handleSaveScene (item) {
      await saveScene({
        clients: [{
          ...this.currentScreenItem,
          windows: this.windows.map(row => {
            return {
              id: row.id,
              layoutWindowId: row.layoutWindowId,
              mediaId: row.mediaId
            }
          })
        }],
        id: item.id,
      })
      this.$message.success('保存成功')
    },
    async handleDeleteScene (item) {
      await this.$confirm('确认删除场景?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
    },
    async handleUpdateScene (item) {
      this.$prompt('请输入名称', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputValue: item.title,
        }).then(async ({ value }) => {
          item.title = value
          await saveScene({
            id: item.id,
            title: value
          })
        })
    },
    onStart (e) {
      document.body.style.setProperty('--bg-color', 'rgba(241, 151, 44, 0.10)')
      document.body.style.setProperty('--border-value', '1px solid #F1972C')
    },
    onEnd (e) {
      document.body.style.setProperty('--bg-color', 'transparent')
      document.body.style.setProperty('--border-value', '1px solid #ffffff')
      const { originalEvent, newIndex } = e
      if (this.sceneList[newIndex].id) {
        this.getBySceneId(this.sceneList[newIndex].id)
      }
    },
    onEndWindow(e) {
      e.preventDefault()
    },
    handlerWindowsDetail(window) {
      if (!this.lock) {
        for (let index = 0; index < window.length; index++) {
          if(window[index].media) {
            window[index].media_name = window[index].media.media_name
            this.$set(this.windows, index, window[index])
          }
        }
        this.layoutWindows = window
      } else {
        this.$message.error('请先解锁')
      }
    },
    // 拖拽场景 开窗 执行素材
    startSceneHandlerWindow(window, layout, type, callback=() => {}) {
      // 开窗
      let index = 1;
      window.forEach((item, key) => {
        let media = {...item.media};
        if(item.coordinate != undefined && item.coordinate != null) {
          let coordinateStr = item.coordinate;
          let coordinate = JSON.parse(coordinateStr);
          let xPersent = coordinate.left.split("%")[0] / 100;
          let yPersent = coordinate.top.split("%")[0] / 100;
          let widthPersent = coordinate.width.split("%")[0] / 100;
          let heightPersent = coordinate.height.split("%")[0] / 100;
          let width = Math.ceil(widthPersent * this.middleWindowWidth); // 计算百分比绘制窗口
          let height = Math.ceil(heightPersent * this.middleWindowHeight);
          let y = Math.ceil(yPersent * this.middleWindowHeight);
          let x = Math.ceil(xPersent * this.middleWindowWidth);

          let subMode = media.media_type;
          let mediaType = media.media_type;
          let content = media.media_name;
          let playStatus = 0;
          if(!isNaN(Number(subMode))) {
            subMode = mediaTypeStrMap[media.media_type];
          } else {
            mediaType = mediaTypeMap[media.media_type]?mediaTypeMap[media.media_type]: '';
          }
          if(mediaType == 4 || mediaType == 5) {
            content = media.location;
          } else if(mediaType == 9) {
            content = media.media_link;
          } else if(mediaType == 1) {
            playStatus = 1;
          }
          const info = {
            "x": x,
            "y": y,
            "width": width,
            "height": height,
            "isInit": false,
            "id": index,
            "content": content,
            "subMode": subMode,
            "mediaType": mediaType,
            "windowId": index,
            "playStatus": playStatus,
            "autoTime": 5000
          }
          this.select = {...info};
          //创建窗口
          this.createNewWindow(info);
          this.windows.unshift(info);
          index++;

        }
      })
    },
    handlerWindows (window, layout, type, callback=() =>{}) {

      let _this = this;
      const originalWindows = {..._this.windows}
      if(!this.lock) {
        this.handlerWindow = window;
        this.handlerLayout = layout;
        this.handlerType = type;
        this.currentWindowId = 0;
        let openOldMedia = true;
        this.mode = ''
        let windowDomList = document.querySelectorAll('.window-item-no')
        // 关闭所有分屏
        sendCmd('window', 'closeAll', {}, () => {
          this.select  = {}
          this.windows = [];
          //清除可拖拽框
          const targetNodes = document.querySelectorAll('.myDrag');
          targetNodes.forEach((targetNode) => {
            targetNode.parentNode.removeChild(targetNode);
          })
          this.startHandlerWindow(window, layout, type,originalWindows, openOldMedia)
        })
      } else {
        this.$message.error('请先解锁')
      }
    },
    handlerSceneWindows (window, layout, type, callback=() =>{}) {
      if (!this.lock) {
        this.mode = 'manyou'
        // 关闭所有分屏
        sendCmd('window', 'closeAll', {}, () => {
          this.select = {};
          this.windows = [];
          //清除可拖拽框
          const targetNodes = document.querySelectorAll('.myDrag');
          targetNodes.forEach((targetNode) => {
            targetNode.parentNode.removeChild(targetNode);
          })
          this.startSceneHandlerWindow(window, layout, type)
        })
      } else {
        this.$message.error('请先解锁');
      }
    },
    async startHandlerWindow(window, layout, type, originalWindows, openOldMedia,callback=() => {}) {
      let _this = this;
      //是否打开已有素材 仅非自由模式的布局切换才需要保留原窗口
      if(openOldMedia) {
        //获取全部素材
        const allMedias = await getFileListByTerminalId(_this.id, 1, null, 2, null);
        // 开窗
        window.forEach((item, key) => {
          let i = key;
          sendCmd('window', 'open', {row:item, i, content:item , subMode:''}, () => {
            if(originalWindows[i]) {
              let perOriginalWindow = originalWindows[i];
              let mediaType = perOriginalWindow.mediaType;
              let media;
              for(let mediaIndex = 0; mediaIndex < allMedias.length; mediaIndex++){
                let perMedia = allMedias[mediaIndex];
                let content = perMedia.media_name;
                let perMediaType = perMedia.media_type;
                if(perMediaType == 4 || perMediaType == 5) {
                  content = perMedia.location;
                } else if(perMediaType == 9) {
                  content = perMedia.media_link;
                }
                if(content == perOriginalWindow.content && mediaType == perMediaType) {
                  media = perMedia;
                  media.media_name = content;
                  break;
                }
              }
              _this.handleAdd(media, i);
            }
          })
        })
      }
      this.currentLayout = {
        ...layout,
        layoutType: type
      }
      const list = []
      for (let index = 0; index < window.length; index++) {
        if(window[index].media) {
          window[index].media_name = window[index].media.media_name
          window[index].media_type = window[index].media.media_type
          this.handleSelect(index)
        }
        list.push({})
      }
      this.windows = list
      this.windows.splice(0,0)
      for (let index = 0; index < window.length; index++) {
        if(window[index].media) {
          this.$set(this.windows, index, window[index])
        }
      }
      this.layoutWindows = window
      // 获取父级宽，高动态计算格子宽高
      // this.reCalWidthHeight()
    },
    isLock () {
      return this.lock
    },
    async getClientList() {
      const res = await getClientList({
        page: 1,
        pageSize: 20
      })
      this.clientList =  res.data.records;
      this.clientSelected = this.id;
    },
    async getBySceneId (sceneId) {
      if(!this.lock) {
        const res = await getBySceneId({
          clientId: this.id,
          sceneId,
        })
        this.currentScreenItem = res;
        let sceneWindows = [...res.data.layout.windows]
        this.showClearQueueDialogFun(3, sceneWindows);
      } else {
        this.$message.error('请先解锁');
      }
    },
    manyouMethods(msg) {
      if(!this.lock) {
        const {_underlying_vm_} = msg.item
        //因为初始化素材设置了150*150，鼠标位置素材中心，所以鼠标坐标-75
        let originalTimes = Math.ceil(this.middleWindowWidth / 150)
        let square = this.middleWindowWidth / originalTimes;
        let width = square;
        let height = square;
        let x = this.mouseX - square / 2;
        let y = this.mouseY - square / 2;
        const div = this.$refs.windowDom;
        const rect = div.getBoundingClientRect();
        if(this.mouseX > 0 && this.mouseY > 0) {
          if(x < 0 && x > -(square / 2)) {
            x = 0;
          }
          if(y < 0 && y > -(square / 2)) {
            y = 0;
          }
          if(x + square > this.middleWindowWidth) {
            x = this.middleWindowWidth - square;
          }
          if(y + square > this.middleWindowHeight) {
            y = this.middleWindowHeight - square;
          }
          let subMode = _underlying_vm_.media_type;
          let mediaType = _underlying_vm_.media_type;
          let content = _underlying_vm_.media_name;
          if(!isNaN(Number(subMode))) {
            subMode = mediaTypeStrMap[_underlying_vm_.media_type];
          } else {
            mediaType = mediaTypeMap[_underlying_vm_.media_type]?mediaTypeMap[_underlying_vm_.media_type]: '';
          }
          if(mediaType == 4 || mediaType == 5) {
            content = _underlying_vm_.location;
          } else if(mediaType == 9) {
            content = _underlying_vm_.media_link;
          } else if(mediaType == 8) {
            let programs = _underlying_vm_.programs;
            let shows = [];
            for(let i = 0; i < programs.length; i++) {
              let program = programs[i];
              let show = {
                "mode": mediaTypeStrMap[program.media_type],
                "time": program.play_time,
                "content": program.media_name
              };
              shows.push(show);
            }
            let showList = [{
              "id": _underlying_vm_.id,
              "name": _underlying_vm_.id+"",
              "show" : shows
            }]
            content = {
              "showList": showList
            }
          }
          //替换窗口
          let infoId = null;
          let isReplace = false;
          let replaceIndex = 0;
          for(let i = 0; i < this.windows.length; i++) {
            let window = this.windows[i];
            let minX = window.x;
            let maxX = window.x + window.width;
            let minY = window.y;
            let maxY = window.y  + window.height;
            if((this.mouseX + this.mouseChildX)>= minX
                && (this.mouseX + this.mouseChildX) <= maxX
                && (this.mouseY + this.mouseChildY) >= minY
                && (this.mouseY + this.mouseChildY) <= maxY) {

              //替换
              window.content = content;
              window.subMode = subMode;
              window.mediaType = mediaType;
              window.mediaId = _underlying_vm_.id;
              this.windows[i] =  {...window};
              isReplace = true;
              if(this.fileCache != null) {
                this.fileCache.secondType = "openVedioWindow"
                this.fileCache.window = window;
              }
              this.openVedioWindow(window);
              break;
            }
          }
          //新增窗口
          if(!isReplace) {
            infoId = this.currentWindowId + 1;
            this.currentWindowId = this.currentWindowId + 1;

            const isInit = false;

            let playStatus = 0;
            if(mediaType == 1) {
              playStatus = 1;
            }

            const info = {
              "x": x,
              "y": y,
              "width": width,
              "height": height,
              "isInit": isInit,
              "id": infoId,
              "content": content,
              "subMode": subMode,
              "mediaType": mediaType,
              "windowId": infoId,
              "playStatus": playStatus,
              "autoTime": 5000,
              "mediaId" : _underlying_vm_.id
            }
            if(this.fileCache != null) {
              this.fileCache.secondType = "createNewWindow"
              this.fileCache.info = info;
            }
            this.select = {...info};

            //创建窗口
            this.createNewWindow(info);
            this.windows.unshift(info);
          }
        }
      } else {
        this.$message.error('请先解锁');
      }
    },
    startGetVideoAudioPercent(item) {
      sendCmd('audio', 'getpercent', item, (msg) => {
        let result = JSON.parse(msg)

        let percent = parseInt(result.voice, 10)
        this.audioPercent = percent;
        //mute=false 取消静音
        this.videoVoice = result.mute == "false" ? true : false;
        this.$refs.percentAudioBarRef.setPercentValue(percent)
      })
    },
    startWatchVideoPercent(item) {
      // if(this.getPercentTimer) return
      let _this = this;
      if(this.getPercentTimer) {
        clearTimeout(this.getPercentTimer);
      }
      this.getPercentTimer = setTimeout(() => {
        sendCmd('video', 'getpercent', item, (msg) => {
          let result = JSON.parse(msg)
          let percent = parseFloat(result.progress) / 10
          this.$refs.percentBarRef.setPercentValue(percent)
          let playTmpList = result.time.split(':')

          this.videoCurrentPlayTime = playTmpList[0]
          this.videoTotalPlayTime = playTmpList[1]
          this.getPercentTimer = null
          if(percent <= 98 && this.continueStatus) {
            this.startWatchVideoPercent(item)
          }
        })
      }, 1000)
    },
    handleAdd (item, i) {
      let _this = this;

      let infoId;
      if(this.mode === 'manyou') {
        infoId = item.id
      } else {
        infoId = parseInt(i, 10) + 1
      }
      let subMode = item.media_type;
      let mediaType = item.media_type;
      if(!isNaN(Number(subMode))) {
        subMode = mediaTypeStrMap[item.media_type];
      } else {
        mediaType = mediaTypeMap[item.media_type]?mediaTypeMap[item.media_type]: '';
      }
      const info = {
        "id": infoId,
        "content": item.media_name,
        "subMode": subMode,
        "mediaType": mediaType,
        "windowId": infoId,
        "playStatus": 1
      }

      if(item.media_type == 2) {
        sendCmd('image', 'open', info)
      }
      if(item.media_type == 3) {
        let thisSubMode = 'office'
        // ppt后缀有哪些
        if(item.media_suffix == 'ppt' || item.media_suffix == 'pptx') {
          thisSubMode = 'ppt'
        }
        info.subMode = thisSubMode
        sendCmd('office', 'open', info)
      }
      if(item.media_type == 4) {
        info.content = item.location;
        sendCmd('application', 'open', info)
      }
      if(item.media_type == 5) {
        let thisSubMode = 'web'
        info.subMode = thisSubMode;
        info.content = item.location;
        sendCmd('webApplication', 'open', info)
      }
      if(item.media_type == 7) {
        let thisSubMode = 'other'
        info.subMode = thisSubMode
        sendCmd('otherApplication', 'open', info)
      }
      if(item.media_type == 8) {
        let programs = item.programs;
        let shows = [];
        for(let i = 0; i < programs.length; i++) {
          let program = programs[i];
          let show = {
            "mode": mediaTypeStrMap[program.media_type],
            "time": program.play_time,
            "content": program.media_name
          };
          shows.push(show);
        }
        let showList = [{
          "id": item.id,
          "name": item.id+"",
          "show" : shows
        }]
        info.content = {
          "showList": showList
        };
        sendCmd('show', 'save', info)
      }
      if(item.media_type == 9) {
        info.content = item.media_link;
        sendCmd('stream', 'open', info)
      }
      this.$set(this.windows, i, info)


      if(item.media_type == 1) {
        clearTimeout(this.getPercentTimer)
        this.getPercentTimer = null
        sendCmd('video', 'play', info, () => {
          _this.select = info;
        })
      } else {
        this.select = info;
      }
    },
    handleSelect (i) {
      this.activeWindow = i
      this.isShowBarrage = false
      this.select = this.windows[i]
    },
    handleRoam () {
      if(!this.lock) {
        if(this.mode ===  'manyou') {
          if(this.currentWindow) {
            this.currentWindow.mediaType = ''
          }
        }
        // sendCmd('window', 'closeAll', {}, () => {
          this.select = {}
          this.windows = [];
          //清除可拖拽框
          const targetNodes = document.querySelectorAll('.myDrag');
          targetNodes.forEach((targetNode) => {
            targetNode.parentNode.removeChild(targetNode);
          })
          this.getClientWindowList();
        // })
        this.mode = 'manyou'
        this.$message.success('自由模式')
        this.manyouLayoutEdit = {...this.manyouLayout}
        this.manyouLayoutShow = true;
      } else {
        this.$message.error('请先解锁')
      }
    },
    initStream(ops) {
      if (mpegts.isSupported()) {
        // 根据id名称创建对应的video
        const ele = document.getElementById(ops.elementId);
        this.flvPlayer = mpegts.createPlayer(
          {
            type: 'flv', // 指定媒体类型
            isLive: true, // 开启直播（是否为实时流）
            hasAudio: false, // 关闭声音（如果拉过来的视频流中没有音频一定要把这里设置为fasle，否则无法播放）
            cors: true, // 开启跨域访问
            url: ops.URL // 指定流链接（这里是传递过过来的视频流的地址）
          },
          {
            enableWorker: false, //启用分离的线程进行转换（如果不想看到控制台频繁报错把它设置为false，官方的回答是这个属性还不稳定，所以要测试实时视频流的话设置为true控制台经常报错）
            enableStashBuffer: false, //关闭IO隐藏缓冲区（如果需要最小延迟，则设置为false，此项设置针对直播视频流）
            stashInitialSize: 128, //减少首帧等待时长（针对实时视频流）
            lazyLoad: false, //关闭懒加载模式（针对实时视频流）
            lazyLoadMaxDuration: 0.2, //懒加载的最大时长。单位：秒。建议针对直播：调整为200毫秒
            deferLoadAfterSourceOpen: false, //在MediaSource sourceopen事件触发后加载。在Chrome上，在后台打开的标签页可能不会触发sourceopen事件，除非切换到该标签页。
            liveBufferLatencyChasing: true, //追踪内部缓冲区导致的实时流延迟
            liveBufferLatencyMaxLatency: 1.5, //HTMLMediaElement 中可接受的最大缓冲区延迟（以秒为单位）之前使用flv.js发现延时严重，还有延时累加的问题，而mpegts.js对此做了优化，不需要我们自己设置快进追帧了
            liveBufferLatencyMinRemain: 0.3 //HTMLMediaElement 中可接受的最小缓冲区延迟（以秒为单位）
          }
        );
        // mpegts
        this.flvPlayer.attachMediaElement(ele);
        this.videoMap.set(ops.elementId, this.flvPlayer);
        // play(this.flvPlayer);
        // flvEvent();
      }
    },
    /**
     * 重新加载视频
     */
    load() {
      for (let index = 1; index < 5; index++) {
        if (!this.videoMap.has('video-contianer-' + index)) {
          this.initStream({
            URL: 'http://localhost:1010/video/' + tag.value,//这里改成自己要拉流的视频地址，我这里放的是自己后端推送的1078视频的flv实时视频流
            elementId: 'video-contianer-' + index
          });
          break;
        }
      }
    },
    handleClear () {
      if (!this.lock) {
        let _this = this;
        let windowId = this.select.id;
        sendCmd('window', 'close', windowId, () => {
          //清除可拖拽框
          const targetNodes = document.querySelectorAll('.myDrag');
          let thisClassName = "manyou-container-"+windowId;
          targetNodes.forEach((targetNode) => {
            if(targetNode.className.indexOf(thisClassName) > -1) {
              targetNode.parentNode.removeChild(targetNode);
            }
          })
          this.select = {}
          let itemIndex = 0;
          for(let i = 0; i < _this.windows.length; i++) {
            let item = _this.windows[i]
            if(item.windowId == windowId) {
              itemIndex = i;
              break;
            }
          }
          _this.windows[itemIndex] = {};
          if(_this.mode != 'manyou') {
            let item = _this.layoutWindows[windowId - 1];
            let i = windowId - 1;
            sendCmd('window', 'open', {row:item, i, content:{} , subMode:''})
          }
        })
      } else {
        this.$message.error('请先解锁')
      }
    },
    handleLock() {
      this.lock = true;
      this.select = {};
      //清除可拖拽框
      const targetNodes = document.querySelectorAll('.myDrag');
      targetNodes.forEach((targetNode) => {
        targetNode.style.visibility= 'hidden';
      })
      this.$message.success('已锁定');
    },
    handleUnlock() {
      this.lock = false;
      //恢复可拖拽框
      const targetNodes = document.querySelectorAll('.myDrag');
      targetNodes.forEach((targetNode) => {
        targetNode.style.visibility= '';
      })
      this.$message.success('已解锁');
    },
    handleBarrage () {
      const videoDom = document.getElementById('video-client-bg')

      this.isShowBarrage = !this.isShowBarrage
      if (this.isShowBarrage) {
        this.getCaptions()
        videoDom.style.zIndex = -1
      } else {
        videoDom.style.zIndex = 100
      }
    },
    async getCaptions () {
      const res = await getCaptions({
          page: 1,
          pageSize: 20,
          clientId: this.id,
        })
        this.barrageData = res.data.records
        for(let i = 0; i < this.barrageData.length; i++) {
          this.barrageData[i].scene = i+1;
        }
    },
    changeAudioPercent(row) {
      this.audioPercent = row
      if(this.timer) {
        clearTimeout(this.timer)
        this.timer = null
      }
      this.timer = setTimeout(() => {
        let cacheDetail = this.currentWindow
        cacheDetail.percent = row
        sendCmd('audio', 'percent', cacheDetail)
      }, 500)
    },
    changePercent(row) {
      if(this.timer) {
        clearTimeout(this.timer)
        this.timer = null
      }
      this.timer = setTimeout(() => {
        let cacheDetail = this.currentWindow
        cacheDetail.percent = row
        sendCmd('video', 'percent', cacheDetail)
      }, 500)
    },
    async handleCaptionsOpen(item, index) {
      await openOrClose({
        open: item.open,
        id: item.id,
      })
      let object = JSON.parse(item.location);
      // const clientDetail = JSON.parse(localStorage.getItem('clientDetail'))
      const rateX = Number(this.clientDetail.resolution_rate.split('*')[0])
      const rateY = Number(this.clientDetail.resolution_rate.split('*')[1])
      let width = Math.ceil(object.width * rateX); // 计算百分比绘制窗口
      let height = Math.ceil(object.width * rateY);
      let y = Math.ceil(object.y * rateY);
      let x = Math.ceil(object.x * rateX);
      object.x = x;
      object.y = y;
      object.width = width;
      object.height = height;
      object.scene = item.scene;
      object.name = item.text
      // 发送弹幕指令
      if(item.open) {
        sendCmd('captions', 'start', object);
      } else {
        sendCmd('captions', 'close', object)
      }
      this.getCaptions()
    },
    async handleCellDbclick (row, column, cell, event) {
      if (column.property === 'content') {
        this.dialogCaptionsVisible = true
        this.contentForm = row
      }
    },
    changeDmContent(row) {
      this.contentForm.content = row.html
    },
    setDmPos (type) {
      this.contentForm.type = type
    },
    saveCaptions () {
      saveCaptions({
        clientId: this.contentForm.clientId,
        content: this.contentForm.content,
        id: this.contentForm.id,
        open: this.contentForm.open,
        title: this.contentForm.title,
        type: this.contentForm.type,
      })
      this.$message.success('保存成功')
      this.dialogCaptionsVisible = false
      setTimeout(() => {
        this.getCaptions()
      }, 500)
    },
    async getLayoutList () {
      const res = await getLayoutList({
        page: 1,
        pageSize: 2000,
      })
      this.layoutList = res.data.records
      this.layoutList.forEach((item) => {
        if(item.title === '全屏') {
          let image = require('@/assets/terminalDetail/screen_01.png')
          item.image = image
        }
        if(item.title === '二分屏') {
          let image = require('@/assets/terminalDetail/screen_02.png')
          item.image = image
        }
        if(item.title === '三分屏') {
          let image = require('@/assets/terminalDetail/screen_03.png')
          item.image = image
        }
        if(item.title === '四分屏') {
          let image = require('@/assets/terminalDetail/screen_04.png')
          item.image = image
        }
        if(item.title === '九分屏') {
          let image = require('@/assets/terminalDetail/screen_09.png')
          item.image = image
        }
      })
    },
  },
  async created () {
    this.updateTime()
    // 获取屏幕拓展屏
    await this.getExtraScreen();
    await this.getFileListByTerminalId(null)
    await this.getLayoutList()
    await this.getSceneList()
  },
  beforeDestroy () {
    if (this.updateTimeId) {
      clearInterval(this.updateTimeId)
    }
    if (this.player) {
      this.player.dispose();
    }
  },

}
</script>

<style scoped lang="scss">
*:not(input):not(textarea) {
  -webkit-user-select: none; /* disable selection/Copy of UIWeb  */
  -webkit-touch-callout: none; /* disable the IOS popup when long-press on a link */
}
*{
  margin: 0;
  padding: 0;
}
.terminal-detail {
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none; /* Standard syntax */
  background-image: linear-gradient(to bottom, #021132, #072C62);
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 0px;
  overflow: hidden;

  .terminal-detail-header {
    background-image: url("~@/assets/terminalDetail/title_bar.png");
    background-size: 100% 100%;
    line-height: 1.2rem;
  }
  .terminal-detail-header_back{
    cursor: pointer;

    img{
      width: .25rem;
      height: .25rem;
      vertical-align: text-bottom;
    }

    span{
      color: #fff;
      line-height: 1.2rem;
    }
  }

  .svg-icon {
    font-size: .56rem;
    color: #fff;
    margin-right: .2rem;
  }
  &-header {
    position: relative;
    &_time {
      color: #fff;
      position: absolute;
      top: 0;
      left: .2rem;
      font-size: 0.21rem;
      line-height: .8rem;
    }
    &_name {
      color: #fff;
      font-size: .25rem;
      text-align: center;
      height: .8rem;
      line-height: .8rem;
      font-weight: bold;

      .clientSelector{
        width: 3.3rem;
        color: #fff;
        background-color: rgba(0,0,0,0);
        border: none;
        outline: none;
        appearance: none;
        text-align: center;
        font-size: .25rem;
        font-weight: bold;

        option{
          color: #000;
        }
      }
    }
    &_back {
      position: absolute;
      top: 0;
      right: .2rem;
      font-size: 0.21rem;
      height: .8rem;
      line-height: .8rem;
    }
  }
  &-body {
    flex: 1;
    min-height: 0;
    display: flex;
    margin-top: .1rem;
    &-left {
      height: 100%;
    }
    &-content {
      border-radius: .2rem;
      flex: 1;
      height: 100%;
      width: 9rem;
      margin: 0 .2rem;
      display: flex;
      flex-direction: column;

      &-screen {
        background: linear-gradient( 180deg, #0D3377 0%, rgba(13,51,119,0) 100%), #021234;
        height: .8rem;
        text-align: center;
        margin-top: .2rem;display:flex;flex-direction:row;
        border-radius: .2rem .2rem 0 0;

        .screen-button-container{
          line-height: 0.8rem;
          color: #AAA7A8;
          font-size: .26rem;
          flex: 1;
          cursor: pointer;

          .screen-button-container-name {
            line-height: .6rem;
            height: .4rem;
          }

          .screen-button-container-size {
            line-height: .4rem;
            height: .4rem;
            font-size: .16rem;

            &-text{
              display: inline-block;
              line-height: .4rem;
              height: .4rem;
            }
            .border-active {
              border-bottom: #409EFF 2px solid;
            }
          }

        }

        .text-active {
          color: #fff;
        }

      }
      &_main {
        background: linear-gradient( 180deg, rgba(13,51,119,0) 0%, #0D3377 100%), #021234;
        flex: 1;
        width: 100%;
        border-radius: 0 0 .2rem .2rem;
        padding: .16rem .24rem .28rem;
        display: flex;
        flex-direction: column;
        height: 100%;
        box-sizing: border-box;
        .window {
          border: 1px solid #fff;
          flex: 1;
          height: 100%;
          position: relative;
          &:hover {
            background-color: var(--bg-color);
          }
          &-item {
            box-sizing: border-box;
            vertical-align: middle;
            position: relative;
            border: 1px dashed #fff;
            position: absolute;
            width: 200px;
            height: 200px;
            &-no {
              width: 100%;
              height: 100%;
              background-color: transparent;
              color: #fff;
              display: flex;
              //align-items: center;
              //justify-content: center;
            }
            &-img {
              width: 100%;
              position: absolute;
              height: 100%;
            }
            &:hover {
              background-color: var(--fodder-bg-color);
              // border: var(--fodder-border-value);
            }
          }
        }
        &-option {
          border-radius: .3rem;
          height: 1.12rem;
          // margin-top: .1rem;
          width: 100%;
          padding: 0 0;
          box-sizing: border-box;

          .operationBtn {
            width: .45rem;
            height: .45rem;
            margin-right: .3rem;
            cursor: pointer;
            background-size: 100% 100%;
          }
          .svg-icon {
            width: 0.6em;
            height: 0.6em;
          }
          .video {
            display: flex;
            align-items: center !important;
            justify-content: center;
            height: .6rem;
            padding: 0 2px;

            .videoPlay{
              background-image: url("~@/assets/terminalDetail/play.png");
            }
            .videoPlay:hover{
              background-image: url("~@/assets/terminalDetail/play_active.png");
            }
            .videoPause{
              background-image: url("~@/assets/terminalDetail/pause.png");
            }
            .videoPause:hover{
              background-image: url("~@/assets/terminalDetail/pause_active.png");
            }
            .videoStop{
              background-image: url("~@/assets/terminalDetail/stop.png");
            }
            .videoStop:hover{
              background-image: url("~@/assets/terminalDetail/stop_active.png");
            }
            .videoReplay{
              background-image: url("~@/assets/terminalDetail/replay.png");
            }
            .videoReplay:hover{
              background-image: url("~@/assets/terminalDetail/replay_active.png");
            }

            img{
              width: .45rem;
              margin: 0 .1rem;
              cursor: pointer;
            }
            .progress {
              flex: 1;
            }
            .svg-icon {
              width: 0.6em;
              height: 0.6em;
              margin-right: .3rem;
            }
          }
          .image {
            display: flex;
            align-items: center;
            height: 100%;
            justify-content: center;

            img{
              width: .45rem;
              cursor: pointer;
            }
            .imagePlay{
              background-image: url("~@/assets/terminalDetail/play.png");
            }
            .imagePlay:hover{
              background-image: url("~@/assets/terminalDetail/play_active.png");
            }
            .imagePause{
              background-image: url("~@/assets/terminalDetail/pause.png");
            }
            .imagePause:hover{
              background-image: url("~@/assets/terminalDetail/pause_active.png");
            }
            .imageFirst{
              background-image: url("~@/assets/terminalDetail/first.png");
            }
            .imageFirst:hover{
              background-image: url("~@/assets/terminalDetail/first_active.png");
            }
            .imageLast{
              background-image: url("~@/assets/terminalDetail/last.png");
            }
            .imageLast:hover{
              background-image: url("~@/assets/terminalDetail/last_active.png");
            }
            .imagePrevious{
              background-image: url("~@/assets/terminalDetail/previous.png");
            }
            .imagePrevious:hover{
              background-image: url("~@/assets/terminalDetail/previous_active.png");
            }
            .imageNext{
              background-image: url("~@/assets/terminalDetail/next.png");
            }
            .imageNext:hover{
              background-image: url("~@/assets/terminalDetail/next_active.png");
            }

            .sum-warp {
              margin: 0 2%;
              display: flex;
              align-items: center;
              color: #fff;
              font-size: .35rem;
              line-height: .54rem;
              width: 1.8rem;

              .sum-warp-text{
                width: 1rem;
                color: #ffffff;
                text-align: center;
                border: none;
                outline: none;
                padding: .1rem;
                border-radius: .1rem;
                font-size: .28rem;
                background-color: rgba(42, 89, 173, 0.50);
              }

              .sum {
                width: 1rem;
                height: .6rem;
                box-sizing: border-box;
                border: 1px solid #fff;
                padding: 0 .1rem;
                margin-right: .1rem;
              }
              .unit{
                height: .6rem;
                margin-left: .16rem;
              }
            }
          }
          .application {
            display: flex;
            align-items: center;
            height: 100%;
            justify-content: center;
            .svg-icon {
              margin-right: .3rem;
            }
            img{
              width: .45rem;
              cursor: pointer;
            }
            .applicationReplay{
              background-image: url("~@/assets/terminalDetail/replay.png");
            }
            .applicationReplay:hover{
              background-image: url("~@/assets/terminalDetail/replay_active.png");
            }
            .applicationClose{
              background-image: url("~@/assets/terminalDetail/close.png");
            }
            .applicationClose:hover{
              background-image: url("~@/assets/terminalDetail/close_active.png");
            }
            .programPlay{
              background-image: url("~@/assets/terminalDetail/play.png");
            }
            .programPlay:hover{
              background-image: url("~@/assets/terminalDetail/play_active.png");
            }
            .programPrev{
              background-image: url("~@/assets/terminalDetail/previous.png");
            }
            .programPrev:hover{
              background-image: url("~@/assets/terminalDetail/previous_active.png");
            }
            .programNext{
              background-image: url("~@/assets/terminalDetail/next.png");
            }
            .programNext:hover{
              background-image: url("~@/assets/terminalDetail/next_active.png");
            }
            .programStop{
              background-image: url("~@/assets/terminalDetail/stop.png");
            }
            .programStop:hover{
              background-image: url("~@/assets/terminalDetail/stop_active.png");
            }
          }
          .web {
            display: flex;
            align-items: center;
            height: 100%;
            justify-content: center;
            img{
              width: .45rem;
              cursor: pointer;
            }
            .webPrevious{
              background-image: url("~@/assets/terminalDetail/previous.png");
            }
            .webPrevious:hover{
              background-image: url("~@/assets/terminalDetail/previous_active.png");
            }
            .webNext{
              background-image: url("~@/assets/terminalDetail/next.png");
            }
            .webNext:hover{
              background-image: url("~@/assets/terminalDetail/next_active.png");
            }
            .webReplay{
              background-image: url("~@/assets/terminalDetail/replay.png");
            }
            .webReplay:hover{
              background-image: url("~@/assets/terminalDetail/replay_active.png");
            }
            .progress {
              margin-left: 10%;
              margin-right: .2rem;
              width: 50%;

              ::v-deep .el-input-group--append .el-input__inner {
                height: .6rem;
                background-color: rgba(42, 89, 173, 0.50);
                border: none;
                font-size: .24rem;
              }

              ::v-deep .el-input-group__append {
                background-color: rgba(64, 158, 255, 1);
                border: none;
                color: #fff;
              }

              ::v-deep .el-progress-bar__outer {
                border: 1px solid #fff;
                border-radius: 0;
                .el-progress-bar__inner {
                  border-radius: 0;
                }
              }
            }
          }
        }

        .barrage {
          width: 100%;
          height: 100%;
          background-color: #fff;
        }
      }
      &_operation {
        height: 1.4rem;
        box-sizing: border-box;
        // height: 100px;
        padding: .16rem 0 0 0;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .svg-icon {
          font-size: .5rem;
          color: #fff;
          margin-right: .3rem;
          vertical-align: baseline;
          &:last-child {
            margin-right: 0;
          }
        }
        .img {
          width: .8rem;
          // height: .8rem;
          margin-right: .2rem;
        }

        &_left::-webkit-scrollbar {
          display: none;
        }
        &_left{
          width: 8rem;
          background: #021234;
          box-shadow: inset 0px 4px .4rem 0px rgba(13,51,119,0.7);
          height: 100%;
          padding: 0 .2rem;
          margin-bottom: .2rem;
          text-align: center;
          display: flex;
          align-items: center;
          overflow-x: auto;
          overflow-y: hidden;
          border-radius: .06rem;

          img {
            width: .6rem;
            height: .6rem;
          }
          .operation-btn-container {
            flex: 1;
            min-width: 1rem;
            cursor: pointer;

            .operation-btn-container-img{
              width:  1rem
            }
            .operation-btn-container-text{
              color: #fff;
              font-size: .23rem;
              width: 1rem;
            }
          }
        }

        &-right::-webkit-scrollbar {
          display: none;
        }
        &-right{
          width: 10.4rem;
          background: #021234;
          box-shadow: inset 0px 4px .4rem 0px rgba(13,51,119,0.7);
          height: 100%;
          padding: 0 .2rem;
          margin-bottom: .2rem;
          text-align: center;
          display: flex;
          align-items: center;
          overflow-x: auto;
          overflow-y: hidden;
          border-radius: .06rem;

          img {
            width: .6rem;
            height: .6rem;
          }
          .right-operation-btn-container {
            text-align: center;
            min-width: 1.2rem;
            cursor: pointer;

            .operation-btn-container-img{
              width:  1.2rem
            }
            .operation-btn-container-text{
              color: #fff;
              font-size: .23rem;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }
      }
    }
    &-right {
      background-color: #031A46;
      width: 4rem;
      border-radius: 0.1rem 0 0 0.1rem;
      margin-top: .2rem;
      // height: 11.6rem !important;

      &-hide{
        margin-top: .2rem;
        width: 1.3rem;

        &_title {
          height: .8rem;
          width: 100%;
          color: #409EFF;
          line-height: .8rem;
          padding: 0 .2rem;
          font-size: .28rem;
          font-weight: bold;
          background-color: #042767;
          border-radius: .4rem 0 0 .4rem;
        }
      }

      &_title {
        height: .8rem;
        width: 100%;
        color: #409EFF;
        line-height: .8rem;
        padding: 0 .2rem;
        font-size: .23rem;
        font-weight: 600;
        background-color: #042767;
        border-radius: .1rem 0 0 0 ;

        &_text{
          display: inline-block;
        }

        &_button{
          position: absolute;
          right: .2rem;
          cursor: pointer;

          img{
            width: .26rem;
            height: .26rem;
            vertical-align: middle;
            margin-right: 2px;
          }

          a{
            font-size: .2rem;
            color: #fff;
          }
        }
      }
      &_body {
        flex: 1;
        margin-top: .1rem;
        overflow: auto;
        padding: 0 .2rem 0 .2rem;
        height: 91%;
      }
      &_body::-webkit-scrollbar {
        display: none;
      }
      .scene-item {
        &_view {
          background-color: #0A2255;
          border-radius: .2rem;
          position: relative;
          overflow: hidden;
          margin-top: .12rem;
          height: 2.1rem;
          &-img {
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
          &-no {
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.8);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }
        &_name {
          color: #fff;
          font-size: .22rem;
          line-height: .43rem;
          height: .43rem;
          bottom: 0;
          width: 100%;
          background-color: rgba(3, 18, 51, 0.7);
          position: absolute;
          padding: 0 .2rem;
        }
      }
    }
  }
  .dragClass {
    border-radius: .16rem;
  }
  .dm-position-row{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    .dm-position-col{
      min-width: 1.6rem;
      cursor: pointer;
      padding: .2rem 0;
    }
    .dm-position-col-active{
      color: #409EFF;
    }
  }

  ::v-deep .el-dialog__body{
    padding: .2rem !important;
  }
  .row-control{
    text-align: center;

    .mayouLayoutInput{
      width: 2rem;
      text-align: center;
    }
  }
}
</style>
<style lang="scss">
.terminal-detail-view {
  background: rgba(204, 204, 204, 1);

  .terminal-detail-view-icon {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    &:last-child {
      margin-bottom: 0;
    }
    .img {
      width: 1.2rem;
      height: 1.2rem;
      font-size: 1.2rem;
      color: #fff;
      margin-right: .2rem;
      margin-bottom: .2rem;
    }
  }
}
.window-item-active{
  border: 2px dashed #67C23A!important;
}
.scene-operate {
  .el-button {
    display: block;
    width: 100%;
  }
  .el-button+.el-button {
    margin-top: .2rem;
    margin-left: 0;
  }
}

.page01-video-bg{
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.video-bg-img{
  width: 100%;
  height: 100%;
  background: transparent;
  position: absolute;
  top: 0;
  left: 0;
}
.video-bg{
  width: 100%;
  height: 100%;
  //background: #000;
  position: absolute;
  top: 0;
  left: 0;

  .player-wrapper{
    height: 100% !important;
  }

  .video-wrapper{
    position: inherit !important;
  }
}
.videoBgFullscreen {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
}
.terminal-detail-body-left{
  background-color: #031A46;
  width: 4rem;
  border-radius: 0 .1rem .1rem 0;
  margin-top: .2rem;
  // height: 11.6rem !important;

  .terminal-detail-body-left-file::-webkit-scrollbar {
    display: none;
  }

  .terminal-detail-body-left-file{
    height: 84%;
    overflow: auto;
    margin-top: .3rem;
    padding: 0 .2rem;

  }

  .terminal-detail-body-left-back{
    cursor: pointer;
    color: #4f8bff;
    width: 100%;
    font-size: 0.22rem;
  }
}
.terminal-detail-body-title{
  height: .8rem;
  width: 100%;
  color: #409EFF;
  line-height: .8rem;
  padding: 0 .2rem;
  font-size: .23rem;
  font-weight: 600;
  background-color: #042767;
  border-radius: 0 .1rem 0 0;

  .title{
    display: inline-block;
    margin-right: .3rem;
  }

  .el-button{
    padding: .06rem !important;
    font-size: .2rem;
    margin-left: .15rem;
    border-radius: .06rem;
    z-index: 2;
  }
}
.terminal-detail-body-menu {
  width: 100%;
  height: .6rem;
  padding: .2rem;
  vertical-align: middle;
  color: rgba(255,255,255,0.7);
  font-size: .22rem;

  .mediaTypeSelector{
    width: 75%;
    background-color: #031F52;
    color: #fff;
    border: none;
    padding: .1rem;
    outline: none;
  }

}
// .terminal-detail-body-content_operation{
//   margin-top: .2rem;
// }
.window-block-container{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  .window-block-row{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    .window-block-col {
      border: .022rem dashed #fff;
      height: 1.6rem;
    }
  }
}
.window-item {
  z-index: 2000;
}
.window-draggable{
  width: 100%;
  position: relative;
  height: 100%;
}
.website-list-body{
}
.website-list-row{
  padding: .2rem;
  cursor: pointer;
}
.window-item-no{
  padding: .2rem;
  position: relative;
  z-index: 100;
}
</style>
<style lang="scss">
  .extraRight {
    width: 120px;
    height: 100%;
    background: #000;
    top: 0;
    position: absolute;
  }
  .extraBottom {
    width: 100%;
    height: 120px;
    background: #000;
    left: 0;
    position: absolute;
  }
  .windowMask {
    position: absolute;
    top:0;
    left:0;
    background-color: rgba(0,0,0,0.1);
    width: 1200px;
    height: 1000px
  }
  .expand-enter-active, .expand-leave-active {
    transition: all 0.5s ease;
  }
  .expand-enter, .expand-leave-to {
    height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    margin: 0;
  }
  .hg-theme-default{
    background-color: rgba(0,0,0,0.8)
  }
  .remoteKeyboard {
    position: absolute !important;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 101;

    .combination-keyboard {
      width: 100%;
      height: 1rem;
      padding: .2rem 0 1.2rem 0px;

      .combination-keyboard-button {
        padding: .2rem .4rem;
        float: left;
        cursor: pointer;
        height: .6rem;
        background-color: rgba(255, 255, 255, 1);
        text-align: center;
        display: flex;
        align-items: center;
        margin-right: .2rem;
        border-radius: .1rem;
        font-size: .2rem;
        justify-content: center;
      }
      .combination-keyboard-button-active {
        background-color: #409EFF;
        color: #fff;
      }
      .combination-keyboard-button-close{
        cursor: pointer;
        background-color: rgba(255, 255, 255, 0);
        color: #fff;
        float: right;
        margin-right: 0;
      }
    }
  }
  .cotroll-button-pannel-parent{
    width: 100%;
    top: 0;
    position: fixed;
    text-align: center;
    z-index: 101;

    .cotroll-button-pannel {
      backdrop-filter: blur(3px);
      width: 5rem;
      padding: 0 .3rem;
      margin: 0 auto;
      height: 0.8rem;
      background-color: rgba(2, 18, 51, 0.70);
      border-radius: 0 0 .12rem .12rem;
      text-align: center;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-start;

      .cotroll-button-pannel-btn {
        flex: 1;
        cursor: pointer;

        .cotroll-button-pannel-btn-exit{
          width: .6rem;
          text-align: center;
          margin: 0 auto;

          img{
            width: .3rem;
            height: .3rem;
          }
        }

        .cotroll-button-pannel-btn-text{
          width: .6rem;
          color: #fff;
          font-size: .15rem;
          margin: 0 auto;
        }
        .active{
          color: #409EFF;
        }
      }

    }
  }
  .control-panel{
    height: 1.4rem;
    position: absolute;
    display: flex;
    text-align: center;
    z-index: 101;
    justify-items: center;
    align-items: center;

    .left{
      width: .6rem;
      height: 1.5rem;
      background-image: url("~@/assets/terminalDetail/left.png");
      background-size: 100% 100%;
    }

    .left:hover{
      background-image: url("~@/assets/terminalDetail/left_active.png");
    }

    .scrollBar{
      position: absolute;
      left: 0.9rem;
      top: -1.3rem;

      .el-slider__button{
        width: .4rem;
        height: .4rem;
        border: .04rem solid rgba(0, 0, 0, 0.4);
        background-color: rgba(223, 228, 237, 0.8);
        outline: .04rem solid rgba(0, 0, 0, 0.3);
      }

      .el-slider.is-vertical .el-slider__bar {
        width: .4rem;
        border-radius: 0 0 .4rem .4rem;
        background-color: rgba(255, 255, 255, 0);
      }
      .el-slider.is-vertical .el-slider__button-wrapper{
        left: -15%;
      }
      .el-slider.is-vertical .el-slider__runway{
        width: .4rem;
        height: 2rem !important;
        border-radius: .4rem;
        margin: 0;
        background-color: rgba(223, 228, 237, 0.8);
        outline: .05rem solid rgba(223, 228, 237, 1);
      }

     .sliderBar .el-slider__runway,.sliderBar .el-slider__bar{
        background-color: rgba(0, 0, 0, 0) !important;
        outline: none !important;
      }
    }

    .middle{
      width: 1rem;
      height: 1rem;
      background-image: url("~@/assets/terminalDetail/circle.png");
      background-size: 100% 100%;
      z-index: 101;
    }

    .middle:hover{
      background-image: url("~@/assets/terminalDetail/circle_active.png");
      z-index: 101;
    }

    .right{
      width: .6rem;
      height: 1.5rem;
      background-image: url("~@/assets/terminalDetail/right.png");
      background-size: 100% 100%;
    }

    .right:hover{
      background-image: url("~@/assets/terminalDetail/right_active.png");
    }

    /* .control-panel-top {
      height: 1rem;

      .top-button {
        width: 5.1rem;
        height: .6rem;
        margin-top: .4rem;
        opacity: 70%;
      }
      .top-button:hover{
        opacity: 100%;
      }
    }
    .control-panel-bottom {
      height: 70px;
      text-align: center;

      .bottom-button {
        width: 5.1rem;
        height: 5.1rem;
        border-radius: 50%;
        margin-top: .1rem;
        opacity: 70%;
      }

      .bottom-button:hover{
        opacity: 100%;
      }
    } */
  }
  .cotroll-button{
    width: 1.2rem;
    height: 1.2rem;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;
    color: #fff;
    padding-top: 22px;
    bottom: 1rem;
    z-index: 99
  }
  .video-js{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
  }
  .myDrag {
    z-index: 2 !important;
    outline: .03rem dashed lightgrey;
  }
  .vdr.myDrag.active::before{
    /* outline-color: green; */
    outline: .03rem dashed green;
  }
  .vdr.myDrag.active .vdr-stick{
    background-color: green;
    width: .1rem !important;
    height: .1rem !important;
  }
  .vdr-stick-bl{
    bottom: -.05rem !important;
    left: -.05rem !important;
  }
  .vdr-stick-ml{
    left: -.05rem !important;
  }
  .vdr-stick-tl{
    top: -.05rem !important;
    left: -.05rem !important;
  }
  .vdr-stick-tm{
    top: -.05rem !important;
  }
  .vdr-stick-bm{
    bottom: -.05rem !important;
  }
  .vdr-stick-br{
    bottom: -.05rem !important;
    right: -.05rem !important;
  }
  .vdr-stick-mr{
    right: -.05rem !important;
  }
  .vdr-stick-tr{
    top: -.05rem !important;
    right: -.05rem !important;
  }
  .terminal-detail-body-content_main-option-video{
    padding: .14rem .4rem;
    .progress{
      margin-bottom: .1rem;
      font-size: .25rem;

      .vue-slider-rail{
        height: .1rem;
        background-color: rgba(217, 217, 217, 0.40);
      }

      .vue-slider-ltr{
        padding: 0 !important;
        height: .1rem !important;
      }
    }
    .video{
      align-items: flex-start!important;

      .vue-slider-rail{
        background-color: rgba(217, 217, 217, 0.40);
      }
    }
    .audio-progress{
      width: 20%;
      position: relative;

      .vue-slider-rail{
        height: .16rem;
        background-color: rgba(217, 217, 217, 0.40) !important
      }
    }
    .audio-words{
      color: white;
      position: relative;
      padding: 0.5% 0;
      font-size: .32rem;
      color: rgba(255, 255, 255, 0.80);
      left: 7px;
    }
  }

.dragClass {
  .item_view {
    transform: scale(0.5);
  }
}

.item {
  margin-top: .12rem;

  .item_view {
    border-radius: .2rem !important;
    height: 2.1rem;
    // background-color: rgba(255, 255, 255, 0.8);
    background-color: #0A2255;
    position: relative;
    overflow: hidden;

    .item_type {
      color: #fff;
      font-size: .15rem;
      line-height: .32rem;
      height: .32rem;
      top: .2rem;
      right: .2rem;
      padding: 0 .16rem;
      background-color: rgba(3, 18, 51, 0.4);
      position: absolute;
      text-align: center;
      border-radius: .2rem;
    }

    .item_view-img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .item_name {
      color: #fff;
      font-size: .22rem;
      line-height: .43rem;
      height: .43rem;
      bottom: 0;
      width: 100%;
      background-color: rgba(3, 18, 51, 0.7);
      position: absolute;
      padding: 0 .2rem;
    }
  }
}
  .input-with-select{
    .el-input__inner{
      color: #fff;
    }
  }
  [v-cloak] {
      display: none !important;
  }
.bigMask{
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  z-index: 10;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;

  .lockRed{
    display: block;
    width: 1.5rem;
  }
}
</style>
